Τμήμα Μηχανικών Πληροφορικής. Πτυχιακή Εργασία ΔΗΜΙΟΥΡΓΙΑ ΔΥΝΑΜΙΚΟΥ WEBSITE ΓΙΑ ΜΙΑ ΚΟΙΝΩΝΙΚΗ ΥΠΗΡΕΣΙΑ ΜΕ ΧΡΗΣΗ HTML5

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

Download "Τμήμα Μηχανικών Πληροφορικής. Πτυχιακή Εργασία ΔΗΜΙΟΥΡΓΙΑ ΔΥΝΑΜΙΚΟΥ WEBSITE ΓΙΑ ΜΙΑ ΚΟΙΝΩΝΙΚΗ ΥΠΗΡΕΣΙΑ ΜΕ ΧΡΗΣΗ HTML5"

Transcript

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

2 Εγκρίθηκε από την τριμελή εξεταστική επιτροπή την Ν. Παπαδάκης Επίκουρος καθηγητής 2

3 3

4 Ευχαριστίες Θέλω να ευχαριστήσω την οικογένεια και κυρίως την μητέρα μου για την επιμονή της να σπουδάσω. Τους πραγματικούς φίλους για τις ωραίες στιγμές. Τα μέλη του εκπαιδευτικού προσωπικού του τμήματος για την προσφορά γνώσεων. Τέλος τον κύριο Παπαδάκη Νίκο, για την ευκαιρία να δουλέψω πάνω στο αντικείμενο που με ενδιαφέρει. Αφροδίτη Γανέλλη Απρίλιος

5 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ Abstract 9 Σύνοψη 9 1 Εισαγωγή Περίληψη Κίνητρο για την διεξαγωγή της εργασίας Σκοπός και στόχοι εργασίας Δομή εργασίας 10 2 ΜΕΘΟΔΟΛΟΓΙΑ ΥΛΟΠΟΙΗΣΗΣ Στατικές ιστοσελίδες Δυναμικές ιστοσελίδες με βάσεις δεδομένων Διαφορά δυναμικής και στατικής ιστοσελίδας Λογισμικό ανοικτού κώδικα FrontEnd BACKEND Τεχνολογίες που χρησιμοποιήθηκαν JavaScript Μοντέλο εκτέλεσης Javascript και Java Bootstrap Bootstrap ιστορία Λόγοι που επιλέξαμε το Bootstrap 22 3 Σχεδιασμός για το πάνω μέρος του site Επιλογή text editor Εγκατάσταση Βootstrap 24 Βήμα 2 ο 24 Βήμα 3 ο 25 Βήμα 4 ο 25 Βήμα 5 ο Bασικά στοιχεία της HTML Πως λειτουργούνε οι ετικέτες Eπιλογή αρχικού template Ρύθμιση CSS μονοπατιών Επιλογή δεύτερου template Διαφορές των ετικετών Δομές δέντρων σε HTML αρχεία 40 5

6 3.9 Τι είναι οι λίστες 41 Ενημέρωση h1 επικεφαλίδας: 41 Ενημέρωση παραγράφου: 41 Ευθυγράμμιση κειμένου για το div με την κλάση jumbotron 42 Αλλαγή χρώματος κουμπιού σε κόκκινο Τρόποι με τους οποίους συμπεριλαμβάνουμε την CC Εξειδίκευση (Specificity) Συμπεριλαμβάνουμε Αrvo γραμματοσειρά Ιδιότητες χαρακτήρων και γραμματοσειρές Τι είναι το Box Model και πως λειτουργεί Πλάτος και ύψος ενός html στοιχείου 48 4 Άμεση και σχετική διευθυνσιοδότηση Εισαγωγή εικόνων Τι είναι Grid system και που χρησιμεύει Διαφορές μεταξύ απόλυτης και σχετικής διεύθυνσης URL Google Drive και Google Forms Φόρμα συμπλήρωσης Άμεση διευθυνσιοδότηση Έμμεση διευθυνσιοδότηση 59 5 Σχεδιασμός για το κάτω μέρος του site Η χρησιμότητα του Font-awesome Η μορφοποίηση του τμήματος Get Ιnvolved Δημιουργία του τμήματος Who We Are Τοποθέτηση εικόνας του Τμήματος Μηχανικών Πληροφορικής Συμπεράσματα 70 7 BΙΒΛΙΟΓΡΑΦΙΑ 71 ΠΙΝΑΚΑΣ ΕΙΚΟΝΩΝ Εικόνα 1 Στατική ιστοσελίδα μεταφέρεται στον διακομιστή στην μορφή που είναι αποθηκευμένη Εικόνα 2 Δυναμική ιστοσελίδα. Ο χρήστης αλληλεπιδρά με τον εξυπηρετητή ιστοσελίδων Εικόνα 3 Λογότυπο λογισμικού ανοιχτού κώδικα Εικόνα 4 Διαφορά frontend με backend Εικόνα 5 Η HTML είναι η δομή της σελίδας και η CSS η 6

7 μορφοποίησή της Εικόνα 6 Το λογότυπο της Javascript Εικόνα 7 Το Bootstrap είναι ένα πανίσχυρο εργαλείο για γρήγορη ανάπτυξη ιστοσελίδων Εικόνα 8 Επιλογή text editor Εικόνα 9 Αρχική σελίδα Bootstrap Εικόνα 10 Kατέβασμα Βootstrap Εικόνα 11 O κατάλογος my-site στον text editor Εικόνα 12 Δημιουργία index.html Εικόνα 13 O ρόλος της ετικέτας link Εικόνα 14 Παραδείγματα με βασικά template Εικόνα 15 Επιλογή αρχικού template Εικόνα 16 O κώδικας του Jumbotron στο index.html Εικόνα 17 Με διπλό κλικ πάνω στο index βλέπουμε το site στον browser Εικόνα 18 Τι βλέπουμε στην οθόνη όταν δεν έχουνε φτιαχτεί τα css μονοπάτια Εικόνα 19 Δημιουργία του css Εικόνα 20 Διπλό κλικ πάνω στο jumbotron.css για να πάρω τον κώδικα Εικόνα 21 Eπιλογή δεύτερου template Εικόνα 22 Εύρεση κώδικα που ατιστοιχεί στην μπάρα περιήγησης Εικόνα 23 Το site με την νέα γραμμή περιήγησης Εικόνα 24 Αλλαγές στην κλάση jumbotron Εικόνα 25 Επιλογή Arvo γραμματοσειράς Εικόνα 26 Τρόπος λειτουργίας του Box Model Εικόνα 27 Το site μετά από την εισαγωγή εικόνων Εικόνα 28 Το Grid system του Βootstrap Εικόνα 29 Συμπλήρωση φόρμας στο Google Drive Εικόνα 30 Eπιλογή Google Drive Εικόνα 31 Δημιουργία Google account Εικόνα 32 Δημιουργία φόρμας Εικόνα 33 Επιλογή τίτλου και θέματος Εικόνα 34 Eαν δεν υπάρχουνε άλλες ερωτήσεις επιλέγουμε Done Εικόνα 35 Χρησιμοποίηση του link στο site μας Εικόνα 36 Προσθήκη εικονιδίων στο κάτω μέρος του site Εικόνα 37 Η μορφοποίηση του τμήματος Get Involved Εικόνα 38 Σχεδιασμός πάνω μέρος site Εικόνα 39Το site με την προσθήκη εικόνων Εικόνα 40 Το WHO WE ARE κομμάτι του site

8 Εικόνα 41 To GET ΙNVOLVED τμήμα του site

9 Abstract The rapid spread of the Internet has led to a corresponding increase in websites, where beyond the typical website is provided as a large number of novel applications for creation. This work deals with the creation of a dynamic website, covering all steps from selecting appropriate technologies up to the writing of the code, with a detailed presentation of the development process and decisions had to be taken at every step. Σύνοψη Η ραγδαία εξάπλωση του διαδικτύου έχει οδηγήσει σε μία ανάλογη αύξηση των ιστοσελίδων, όπου πέρα από τα τυπικά website παρέχεται και ένας μεγάλος αριθμός πρωτότυπων εφαρμογών για την δημιουργία τους. Αυτή η εργασία ασχολείται με την δημιουργία μίας δυναμικής ιστοσελίδας, καλύπτοντας όλα τα βήματα από την επιλογή των κατάλληλων τεχνολογιών μέχρι και την συγγραφή του κώδικα, με αναλυτική παρουσίαση της διαδικασίας ανάπτυξης και των αποφάσεων που χρειάστηκε να ληφθούν σε κάθε βήμα. 1 Εισαγωγή 1.1 Περίληψη Σε αυτή την εργασία θα παρουσιάσουμε την δημιουργία ενός δυναμικού site χρησιμοποιώντας το Bootstrap και Html5. Θα αναλύσουμε διεξοδικά όλα τα βήματα από την επιλογή των κατάλληλων τεχνολογιών μέχρι και την συγγραφή του κώδικα. Τέλος παρουσιάζονται τα συμπεράσματά μας σχετικά με τις δημοφιλέστερες τεχνολογίες που χρησιμοποιούνται σε τέτοιου είδους εφαρμογές. 1.2 Κίνητρο για την διεξαγωγή της εργασίας Ο κυριότερος στόχος είναι η δημιουργία ενός δυναμικού website από έναν μη κερδοσκοπικό οργανισμό που ασχολείται με θέματα κακοποίησης. Oι επισκέπτες θα μπορούν να πλοηγηθούν και να βρουν 9

10 πληροφορίες και υποστηρικτικό υλικό για τις δράσεις του συλλόγου. Το διαδίκτυο αναμφισβήτητα παίζει κυρίαρχο ρόλο πλέον στη ζωή μας. Η επιθυμία για την κατασκευή ιστοσελίδων δημιουργήθηκε μαζί με την ανάγκη προβολής σε ένα μεγαλύτερο από το τοπικό κοινό,προσφέροντας ευκαιρίες σε όλους να παρουσιάσουν το αντικείμενο επιθυμούν στον παγκόσμιο ιστό. Οι ιστοσελίδες είναι η επαναστατικότερη μέθοδος προβολής στην εποχή της τεχνολογίας που διανύουμε. Ο απώτερος σκοπός αυτής της εργασίας είναι η εκμάθηση και εξοικείωση με την ΗTML5. Έτσι ώστε να αποκτηθούν τα απαραίτητα εφόδια για την ανάπτυξη οποιασδήποτε ιστοσελίδας μέσω αυτού. Επίσης, λόγω του ότι η ΗTML5 συνδέεται και εξαρτάται άμεσα με άλλες τεχνολογίες και εργαλεία, αποκομίσθηκαν γνώσεις πάνω σε αυτές (CSS, JavaScript,Bootstrap). 1.3 Σκοπός και στόχοι εργασίας Όλα τα είδη των ιστοσελίδων έχουν έναν λόγο ύπαρξης και συγκεκριμένους στόχους. Τα ερωτήματα στα οποία πρέπει να απαντήσουμε είναι: ποιος είναι ο λόγος ύπαρξης του website μας, ποια θα είναι η χρησιμότητα της και ποιους στόχος θέλει να επιτύχει. Για να κατασκευάσουμε μια ιστοσελίδα ξεκινάμε σχεδιάζοντας το πλάνο της με βάση το τι είδους ιστοσελίδα θέλουμε να δημιουργήσουμε. Μετά επικεντρωνόμαστε στην κατασκευή των περιεχομένων της, ακολούθως στην αρχική σελίδα και, τέλος, κάνουμε αποσφαλμάτωση (debug) της ιστοσελίδας και ελέγχουμε αν όλα δουλεύουν σωστά πριν την δημοσίευσή της. Αν ακολουθηθούν τα παραπάνω βήματα θα έχουμε σχεδιάσει το περιεχόμενο που θα υποστηρίζει τους στόχους της μη κερδοσκοπικής εταιρίας, τους χρήστες και το ίδιο το website. 1.4 Δομή εργασίας Στο δεύτερο κεφάλαιο της εργασίας παρουσιάζουμε τις τεχνολογίες που χρησιμοποιήσαμε με κάποια σύντομα στοιχεία για την 10

11 ιστορία τους και τις δυνατότητές τους. Στο τρίτο κεφάλαιο δείχνουμε την εγκατάσταση του Bootstrap,τα βασικά στοιχεία της HTML και πως συνδέεται με την CSS.Καθώς και του τρόπους με τους οποίους μπορούμε να μορφοποιήσουμε τα html στοιχεία. Στο τέταρτο κεφάλαιο γίνεται αναλυτική αναφορά για άμεση και έμμεση διευθυνσιοδότηση. Ρυθμίζονται τα CSS μονοπάτια. Δημιουργείται φόρμα Google. Στο πέμπτο κεφάλαιο γίνεται ο σχεδιασμός του κάτω μέρους του site.στο έκτο κεφάλαιο είναι τα συμπεράσματα που βγάλαμε από τν χρήση Βootstrap και HTML5. Στο έβδομο κεφάλαιο έχουμε την βιβλιογραφία και τις πηγές διαδικτύου που χρησιμοποίηθηκαν για την υλοποίηση αυτής της εργασίας. 2 ΜΕΘΟΔΟΛΟΓΙΑ ΥΛΟΠΟΙΗΣΗΣ Οι δύο μεγάλες κατηγορίες ιστοσελίδων είναι οι στατικές (static web site) και οι δυναμικές (dynamic web site). Όσον αφορά την όψη εμφάνισή τους, δεν έχουν μεγάλες διαφορές μεταξύ τους, αλλά όσον αφορά την λειτουργία και τις δυνατότητές τους, οι διαφορές είναι πολλές και ουσιαστικές. 2.1 Στατικές ιστοσελίδες Οι στατικές ιστοσελίδες είναι ουσιαστικά απλά ηλεκτρονικά "έγγραφα". Μπορούν να περιέχουν κείμενα, φωτογραφίες, συνδέσμους, αρχεία για, κινούμενα σχέδια (animated graphics). Είναι κατάλληλες κυρίως για την δημιουργία "μόνιμων/ στατικών παρουσιάσεων", όπου δεν υπάρχει συχνά η ανάγκη να τροποποιείται το περιεχόμενό τους. Δηλαδή, θα μπορούσε να χρησιμοποιηθεί μια στατική ιστοσελίδα για την γενική παρουσίαση μιας επιχείρησης και των προϊόντων ή υπηρεσιών της. Ο χαρακτηρισμός "στατική", δεν σημαίνει δεν μπορεί να έχει κινούμενα γραφικά. Σημαίνει ότι το περιεχόμενο της κάθε σελίδας είναι σταθερό και συγκεκριμένο. Πρόκειται δηλαδή για σταθερά ηλεκτρονικά έγγραφα. 11

12 Εικόνα 1 Στατική ιστοσελίδα μεταφέρεται στον διακομιστή στην μορφή που είναι αποθηκευμένη Το κύριο μειονέκτημά τους είναι ότι δεν είναι πρακτική/βολική η χρήση τους όταν χρειάζεται το περιεχόμενο της ιστοσελίδας να αλλάζει συχνά, π.χ. τουλάχιστον μία φορά την εβδομάδα να προστίθεται κάποιο άρθρο, ή να αλλάζουν τα προϊόντα κτλ. Αυτό συμβαίνει γιατί για να τροποποιηθεί μια στατική ιστοσελίδα, πρέπει να γίνουν επεμβάσεις απευθείας πάνω στην ιστοσελίδα, με κάποιο σχετικό πρόγραμμα (html editor), μια διαδικασία δηλαδή όπως το να σβήνεις και να γράφεις σε ένα τετράδιο, που όμως χρειάζεται μια σχετική εμπειρία. 2.2 Δυναμικές ιστοσελίδες με βάσεις δεδομένων Οι δυναμικές ιστοσελίδες, μπορεί στην εμφάνιση, σε πολλές περιπτώσεις, να μην έχουν μεγάλη διαφορά με τις στατικές, όμως οι δυνατότητές είναι πολύ περισσότερες, από πολλές πλευρές, καθώς στην περίπτωση αυτή ουσιαστικά πρόκειται για μία εφαρμογή (πρόγραμμα), και όχι ένα απλό ηλεκτρονικό έγγραφο. Συνήθως, οι δυναμικές ιστοσελίδες, χρησιμοποιούν κάποια βάση δεδομένων (database), όπου αποθηκεύουν πληροφορίες και απ' όπου αντλούν το περιεχόμενό τους, ανάλογα με το τι ζητάει ο χρήστης επισκέπτης σε κάθε του "κλικ". Η χρήση των βάσεων δεδομένων, είναι αυτή που επιτρέπει την εύκολη προσθαφαίρεση περιεχομένου στις δυναμικές ιστοσελίδες, καθώς δεν απαιτείται να επεξεργάζεται κανείς κάθε φορά την ίδια την ιστοσελίδα, αλλά απλά να διαχειρίζεται έμμεσα το περιεχόμενο στην βάση δεδομένων και οι υπόλοιπες διαδικασίες γίνονται αυτοματοποιημένα από τον "μηχανισμό" της ιστοσελίδας. 12

13 Εικόνα 2 Δυναμική ιστοσελίδα. Ο χρήστης αλληλεπιδρά με τον εξυπηρετητή ιστοσελίδων. Για την εύκολη διαχείριση του περιεχομένου σε μία δυναμική ιστοσελίδα, υπάρχει πρόσθετα στην ιστοσελίδα ένας εύχρηστος μηχανισμός "CMS" (Content Managment System), μέσω του οποίου η προσθαφαίρεση περιεχομένου μπορεί να γίνει ακόμη και από κάποιον αρχάριο. Φυσικά, η "περιοχή διαχείρισης" της ιστοσελίδας, προστατεύεται με κωδικό πρόσβασης (password), και δεν μπορούν να εισέλθουν σε αυτή οι επισκέπτες της ιστοσελίδας. 2.3 Διαφορά δυναμικής και στατικής ιστοσελίδας Γενικά, αυτό που προσφέρουν οι δυναμικές ιστοσελίδες, είναι μεγαλύτερη αλληλεπίδραση του χρήστη με την σελίδα π.χ. να προσθέτει τα σχόλια του στην σελίδα, αλλά και πολλές ευκολίες στον διαχειριστή του περιεχομένου της ιστοσελίδας π.χ. τον ιδιοκτήτη της σελίδας. Πάντως το γεγονός ότι μια δυναμική ιστοσελίδα προσφέρει περισσότερες δυνατότητες, δεν σημαίνει ότι αυτές είναι απαραίτητες σε όλους, δηλαδή σε αρκετές περιπτώσεις, μία στατική ιστοσελίδα μπορεί να καλύπτει πλήρως τις ανάγκες μιας συνοπτικής παρουσίασης. Από πλευράς κόστους, η στατική ιστοσελίδα είθισται να είναι η φτηνή επιλογή, καθώς είναι πιο απλή η κατασκευή της, ενώ οι δυναμικές ιστοσελίδες λόγω της πολυπλοκότητας τους κοστίζουν ακριβότερα και αυτό είναι λογικό τουλάχιστον όταν γίνονται κατά παραγγελία. Υπάρχει βέβαια και η περίπτωση υλοποίησης μιας δυναμικής ιστοσελίδας με την χρήση κάποιας open source εφαρμογής (CMS) η οποία διατίθεται δωρεάν μέσω του internet και σε αυτήν την περίπτωση η κατασκευή της ιστοσελίδας μπορεί να έχει μηδενικό κόστος (αν γίνει self-service) ή να υπάρξει κάποια χρέωση (η τελική τιμή μιας ιστοσελίδας είναι υποκειμενική υπόθεση) αν η εγκατάσταση και η τυχόν 13

14 παραμετροποίηση της δωρεάν εφαρμογής ανατεθεί σε κάποια εταιρεία. 2.4 Λογισμικό ανοικτού κώδικα Στον χώρο της πληροφορικής και των ηλεκτρονικών υπολογιστών, με τον όρο λογισμικό ανοικτού κώδικα (αγγλ.: Open Source Software, OSS) εννοείται λογισμικό του οποίου ο πηγαίος κώδικας διατίθεται με κάποιον τρόπο ελεύθερα σε όσους ζητούν να τον εξετάσουν. Κατά καιρούς έχουν εμφανιστεί αρκετές διαφορετικές άδειες χρήσης σχεδιασμένες να συνοδεύουν λογισμικό ανοικτού κώδικα. Μερικές από αυτές επιτρέπουν στους χρήστες και να τροποποιήσουν τον κώδικα ή και να τον αξιοποιήσουν σε άλλες εφαρμογές. Εικόνα 3 Λογότυπο λογισμικού ανοιχτού κώδικα Το λογισμικό ανοικτού κώδικα δεν σημαίνει απαραιτήτως δωρεάν λογισμικό, ούτε Ελεύθερο Λογισμικό σύμφωνα με τον ορισμό που δίνει στο Ελεύθερο Λογισμικό το Ίδρυμα Ελεύθερου Λογισμικού, αλλά αναφέρεται μόνο στο γεγονός πως επιτρέπεται σε κάθε χρήστη να εξετάσει και να χρησιμοποιήσει τη γνώση και τις δυνατότητες που προσφέρει ο παρεχόμενος πηγαίος κώδικας. Στην πράξη, τα περισσότερα προγράμματα ανοιχτού κώδικα παρέχονται δωρεάν και μπορούν να χαρακτηριστούν ελεύθερα. 2.5 FrontEnd Όταν συζητάμε για το frontend, μιλάμε για το τμήμα του ιστού που μπορείτε να δείτε και να αλληλεπιδράσετε. Το frontend συνήθως αποτελείται από δύο μέρη: το σχεδιασμό και την ανάπτυξη frontend. Στο παρελθόν όταν κάποιοι συζητούσαν για την ανάπτυξη 14

15 συνήθως αναφέρονταν στο backend, αλλά τα τελευταία χρόνια έχει υπάρξει μια πραγματική ανάγκη για διαφοροποίηση μεταξύ των σχεδιαστών που εργάστηκαν αυστηρά στο Photoshop και εκείνων που γράφουν κώδικα HTML και CSS. Τα πράγματα μπερδεύονται μάλιστα ακόμη περισσότερο, όταν οι σχεδιαστές διέσχισαν τις γραμμές του σχεδιασμού και άρχισαν να εργάζονται με την Javascript και την jquery. Έτσι τώρα, όταν συζητάμε για τον όρο σχεδιασμός ιστοσελίδων, μιλάμε για εκείνους που εργάζονται με το Photoshop και το Fireworks, καθώς και εκείνους που χρησιμοποιούν κώδικα HTML, CSS, JavaScript, jquery κτλ. Ό, τι βλέπετε, στο διαδίκτυο είναι ένας συνδυασμός HTML, CSS, JavaScript, τα οποία ελέγχονται από το πρόγραμμα περιήγησης (browser) του υπολογιστή σας. Αυτά περιλαμβάνουν πράγματα όπως γραμματοσειρές, drop-down μενού, κουμπιά, transitions, sliders, φόρμες επικοινωνίας, κλπ. Για να γίνουν όλα αυτά πραγματικότητα και να αποθηκεύουν οι πληροφορίες που έχετε βάλει στα στοιχεία frontend, χρειαζόμαστε την τεχνολογία που θα τα κάνει εφικτά το backend. Εικόνα 4 Διαφορά frontend με backend 2.6 BACKEND Το backend αποτελείται συνήθως από τρία μέρη: ένα διακομιστή 15

16 (server), μια εφαρμογή (application), και την βάση δεδομένων (database). Αν πχ κλείσετε μια πτήση ή αγοράσετε εισιτήρια συναυλιών, ανοίγετε συνήθως μια ιστοσελίδα και αλληλεπιδράτε με το frontend. Μόλις καταχωρήσετε τις πληροφορίες, η εφαρμογή τις αποθηκεύει σε μια βάση δεδομένων που έχει δημιουργηθεί σε ένα διακομιστή. Για λόγους ευκολίας, απλά σκεφτείτε την βάση δεδομένων ως ένα τεράστιο υπολογιστικό φύλλο του Excel στον υπολογιστή σας, απλά στην συγκεκριμένη περίπτωση ο server που αποθηκεύονται τα δεδομένα μπορεί να είναι στην Αμερική, την Γερμανία κτλ. Όλες αυτές οι πληροφορίες παραμένουν στο διακομιστή, έτσι ώστε όταν συνδεθείτε ξανά στην εφαρμογή για πχ την εκτύπωση των εισιτηρίων σας, όλες οι πληροφορίες να είναι ακόμα στο λογαριασμό σας. Το πρόσωπο που χτίζει όλα αυτά, έτσι ώστε να εργαστούν από κοινού αυτές οι τεχνολογίες, είναι ο backend developer του έργου. Οι Backend τεχνολογίες συνήθως αποτελούνται από γλώσσες όπως η PHP, η Ruby, η Python, κλπ. Για να γίνουν ακόμα ευκολότερες στη χρήση, ενισχύονται από frameworks όπως, το Ruby on Rails, το Cake PHP, το Code Igniter κτλ κάνωντας με αυτό τον τρόπο την ανάπτυξη πιο γρήγορη και πιο εύκολη. 2.7 Τεχνολογίες που χρησιμοποιήθηκαν HTML / CSS Η συντριπτική πλειοψηφία των σελίδων στο διαδίκτυο είναι γραμμένες στη γλώσσα HTML. Ο βασικότερος λόγος ήταν αρχικά η συμβατότητα με όλους τους browsers. Το γεγονός πως όλοι οι χρήστες μπορούν να δουν μία σελίδα HTML ήταν από την αρχή στοιχειώδες στην επιτυχία της, καθώς υποσκέλισε τις αρχικά περιορισμένες δυνατότητες της γλώσσας. Μέρος της HTML είναι και η γλώσσα CSS (Cascading Style 16

17 Sheets). Οι δύο γλώσσες αλληλοσυμπληρώνονται, με την HTML να περιγράφει την δομή και το περιεχόμενο μίας σελίδες ενώ το CSS δίνει οδηγίες για την αισθητική της παρουσίαση. Εικόνα 5 Η HTML είναι η δομή της σελίδας και η CSS η μορφοποίησή της. H HTML είναι το ακρωνύμιο των λέξεων Hyper Text Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμηση σελίδων του World Wide Web (ή απλά ιστού: Web). Είναι μία γλώσσα προγραμματισμού. Χρησιμοποιείται για να σημαίνει ένα τμήμα κειμένου και να το κάνει να εμφανίζεται καλύτερα. Επιτρέπει την ενσωμάτωση ήχου και εικόνων στις web σελίδες. Αρχικά είχε κατασκευασθεί με σκοπό μόνο την μορφοποίηση κειμένου, αλλά μεγάλωσε και ενσωμάτωσε σχεδιαστικές τεχνικές κ.α. Το 1990 ο Tim Berners-Lee από το Cern, το εργαστήριο φυσικής της Γενεύης,δημιούργησε ένα νέο πρωτόκολλο με το οποίο θα μπορούσαν να μεταφέρονται κάθε είδος αρχείων και αντικειμένων μέσα από το Internet. Το πρωτόκολλο αυτό ονομάστηκε HTTP (Hyper Text Transfer Protocol) και σηματοδότησε την αρχή του WWW όπως το ξέρουμε σήμερα. Οι σελίδες που ήταν η βάση του WWW ήταν γραμμένες στην πρώτη έκδοση της γλώσσας HTML. Το 1994 αναπτύσσεται το πρότυπο HTML 2.0 από ένα διεθνή οργανισμό (Internet Engineering Task Force). H επόμενη έκδοση η 3.0 δεν έγινε αποδεκτή από τις Microsoft και Netscape οπότε γρήγορα αντικαταστάθηκε από την έκδοση 3.2 (1996). Η τελευταία περιελάμβανε πολλές από τις σημάνσεις (tags) που είχαν εισάγει οι δύο εταιρίες. Η έκδοση 4.0 παρουσιάστηκε τον Ιούνιο του Η HTML5 είναι μια υπό ανάπτυξη γλώσσα σήμανσης για τον 17

18 Παγκόσμιο Ιστό που όταν ετοιμαστεί θα είναι η επόμενη μεγάλη έκδοση της HTML (Γλώσσα Υπερκειμένου,Hyper Text Markup Language). Η ομάδα Web Hypertext Application Technology Working Group (WHATWG) άρχισε δουλειά σε αυτή την έκδοση τον Ιούνιο του 2004 με το όνομα Web Applications 1.0. Το Φεβρουάριο του 2010 το πρότυπο ήταν ακόμη σε κατάσταση "Last Call" στο WHATWG. Η HTML5 προορίζεται για αντικατάσταση της HTML 4.01, της XHTML 1.0, και της DOM Level 2 HTML. Ο σκοπός είναι η μείωση της ανάγκης για ιδιόκτητα plug-in και πλούσιες διαδικτυακές εφαρμογές (RIA) όπως το Adobe Flash, το Microsoft Silverlight, το Apache Pivot, και η Sun JavaFX. Οι ιδέες πίσω από την HTML5 εμφανίστηκαν αρχικά το 2004 από την ομάδα WHATWG. Η HTML5 εμπεριέχει το πρότυπο Web Forms 2.0 που είναι επίσης της WHATWG. Το πρότυπο HTML5 υιοθετήθηκε ως αρχικό βήμα για τις εργασίες της νέας ομάδας εργασίας HTML του W3C το Αυτή η ομάδα εργασίας δημοσίευσε το Πρώτο Δημόσιο Working Draft του προτύπου στις 22 Ιανουαρίου Το πρότυπο είναι ακόμη υπό ανάπτυξη, και αναμένεται να παραμείνει έτσι για πολλά χρόνια, παρόλο που μέρη της HTML5 θα τελειώσουν και θα υποστηριχτούν από περιηγητές πριν το όλο πρότυπο φτάσει στη τελική κατάσταση Recommendation. 2.8 JavaScript Η JavaScript είναι μια γλώσσα προγραμματισμού ηλεκτρονικών υπολογιστών, η οποία έχει σαν σκοπό την παραγωγή δυναμικού περιεχομένου και την εκτέλεση κώδικα στην πλευρά του πελάτη (clientside) στις ιστοσελίδες. Το πρότυπο της γλώσσας κατά τον οργανισμό τυποποίησης ECMA ονομάζεται ECMAscript. 18

19 Εικόνα 6 Το λογότυπο της Javascript Η γλώσσα προγραμματισμού JavaScript δημιουργήθηκε αρχικά από τον Brendan Eich της εταιρείας Netscape με την επωνυμία Mocha. Αργότερα, Mocha μετονομάστηκε σε LiveScript, και τελικά σε JavaScript, κυρίως επειδή η ανάπτυξή της επηρεάστηκε περισσότερο από τη γλώσσα προγραμματισμού Java. LiveScript ήταν το επίσημο όνομα της γλώσσας όταν για πρώτη φορά κυκλοφόρησε στην αγορά σε βήτα (beta) εκδόσεις με το πρόγραμμα περιήγησης στο Web, Netscape Navigator εκδοχή 2.0 τον Σεπτέμβριο του Αργότερα μετονομάστηκε σε JavaScript σε μια κοινή ανακοίνωση με την εταιρεία Sun Microsystems στις 4 Δεκεμβρίου, 1995, όταν επεκτάθηκε στην έκδοση του προγράμματος περιήγησης στο Web, Netscape εκδοχή 2.0B3. Η JavaScript απέκτησε μεγάλη επιτυχία ως γλώσσα στην πλευρά του πελάτη (client-side) για εκτέλεση κώδικα σε ιστοσελίδες, και περιλήφθηκε σε διάφορα προγράμματα περιήγησης στο Web. Κατά συνέπεια, η εταιρεία Microsoft ονόμασε την εφαρμογή της σε JScript για να αποφύγει δύσκολα θέματα εμπορικών σημάτων. JScript πρόσθεσε νέους μεθόδους για να διορθώσει τα Y2K-προβλήματα στην JavaScript, οι οποίοι βασίστηκαν στην java.util.date τάξη της Java. JScript περιλήφθηκε στο πρόγραμμα Internet Explorer εκδοχή 3.0, το οποίο κυκλοφόρησε τον Αύγουστο του

20 Τον Νοέμβριο του 1996, η Netscape ανακοίνωσε ότι είχε υποβάλει τη γλώσσα JavaScript στο Ecma International (μια οργάνωση της τυποποίησης των γλωσσών προγραμματισμού) για εξέταση ως βιομηχανικό πρότυπο, και στη συνέχεια το έργο είχε ως αποτέλεσμα την τυποποιημένη μορφή που ονομάζεται ECMAScript. Η JavaScript έχει γίνει μία από τις πιο δημοφιλείς γλώσσες προγραμματισμού ηλεκτρονικών υπολογιστών στον Παγκόσμιο Ιστό (Web). Αρχικά, όμως, πολλοί επαγγελματίες προγραμματιστές υποτίμησαν τη γλώσσα διότι το κοινό της ήταν ερασιτέχνες συγγραφείς ιστοσελίδων και όχι επαγγελματίες προγραμματιστές (και μεταξύ άλλων λόγων). Με τη χρήση της τεχνολογίας Ajax, η JavaScript γλώσσα επέστρεψε στο προσκήνιο και έφερε πιο επαγγελματική προσοχή προγραμματισμού. Το αποτέλεσμα ήταν ένα καινοτόμο αντίκτυπο στην εξάπλωση των πλαισίων και των βιβλιοθηκών, τη βελτίωση προγραμματισμού με JavaScript, καθώς και αυξημένη χρήση της JavaScript έξω από τα προγράμματα περιήγησης στο Web. Τον Ιανουάριο του 2009, το έργο CommonJS ιδρύθηκε με στόχο τον καθορισμό ενός κοινού προτύπου βιβλιοθήκης κυρίως για την ανάπτυξη της JavaScript έξω από το πρόγραμμα περιήγησης και μέσα σε άλλες τεχνολογίες (π.χ. Server-side) Μοντέλο εκτέλεσης Η αρχική έκδοση της Javascript βασίστηκε στη σύνταξη στη γλώσσα προγραμματισμού C, αν και έχει εξελιχθεί, ενσωματώνοντας πια χαρακτηριστικά από νεότερες γλώσσες. Αρχικά χρησιμοποιήθηκε για προγραμματισμό από την πλευρά του πελάτη (client), που ήταν ο φυλλομετρητής (browser) του χρήστη, και χαρακτηρίστηκε σαν clientside γλώσσα προγραμματισμού. Αυτό σημαίνει ότι η επεξεργασία του κώδικα Javascript και η παραγωγή του τελικού περιεχομένου HTML δεν πραγματοποιείται στο διακομιστή, αλλά στο πρόγραμμα περιήγησης των επισκεπτών, ενώ μπορεί να ενσωματωθεί σε στατικές σελίδες HTML. Αντίθετα, άλλες γλώσσες όπως η PHP εκτελούνται στο διακομιστή (server-side γλώσσες προγραμματισμού). Παρά την ευρεία χρήση της Javascript για συγγραφή προγραμμάτων σε περιβάλλον φυλλομετρητή, αξίζει να σημειωθεί ότι από την αρχή χρησιμοποιήθηκε και για τη συγγραφή κώδικα από την πλευρά του διακομιστή, από την ίδια τη Netscape στο προϊόν LiveWire, 20

21 με μικρή επιτυχία. Η χρήση της Javascript στο διακομιστή εμφανίζεται πάλι σήμερα, με τη διάδοση του Node.js, ενός μοντέλου προγραμματισμού βασισμένο στα γεγονότα (events) Javascript και Java Η Javascript δεν θα πρέπει να συγχέεται με τη Java, που είναι διαφορετική γλώσσα προγραμματισμού και με διαφορετικές εφαρμογές. Η χρήση της λέξης "Java" στο όνομα της γλώσσας έχει περισσότερη σχέση με το προφίλ του προϊόντος που έπρεπε να έχει και λιγότερο με κάποια πιθανή συμβατότητα ή άλλη στενή σχέση με τη Java. Ρόλο σε αυτήν τη σύγχυση έπαιξε και ότι η Java και η Javascript έχουν δεχτεί σημαντικές επιρροές από τη γλώσσα C, ειδικά στο συντακτικό, ενώ είναι και οι δύο αντικειμενοστραφείς γλώσσες. Τονίζεται ότι ο σωστός τρόπος γραφής της είναι "Javascript" και όχι 'Java script' σαν δύο λέξεις, όπως λανθασμένα γράφεται ορισμένες φορές. 2.9 Bootstrap Το γνωστό κοινωνικό δίκτυο twitter εδώ και ένα χρόνο περίπου έχει δημιουργήσει μια πανίσχυρη τεχνολογική βάση που λέγεται Bootstrap. Πρόκειται για ένα πακέτο από έτοιμα συστατικά και λειτουργίες ιστοσελίδων (π.χ. buttons, navigation bars, alerts, tabs κ.ά.) γραμμένα σε open source κώδικα Html,Css,Javascript (διαθέσιμο στο Github) έτοιμα για να εφαρμοστούν και να λειτουργήσουν άμεσα από οποιοδήποτε developer. 21

22 Εικόνα 7 Το Bootstrap είναι ένα πανίσχυρο εργαλείο για γρήγορη ανάπτυξη ιστοσελίδων Bootstrap ιστορία Το Bootstrap αναπτύχθηκε από Mark Otto και Jacob Thornton στο Twitter, και κυκλοφόρησε ως ένα open source προϊόν τον Αύγουστο του 2011.Τον Ιούνιο του 2014 Bootstrap ήταν το έργο Νο.1 για GitHub. Έχει χρησιμοποιηθεί σε πολυάριθμα site μεταξύ των οποίων σε project της NASA αλλά και από τον Λευκό Οίκο. Δεν είναι τυχαίο που είχε τόσο μεγάλη επιτυχία καθώς διευκολύνει και απλουστεύει πολύ την δημιουργία ιστοσελίδων προσφέροντας μια καλαίσθητη, εύκολη και ευέλικτη υποδομή για front-end developers και designers. Η έκδοση 3, δηλώνει εξαρχής ακόμη πιο συμβατή με mobile συσκευές, τις οποίες και βάζει σε απόλυτη προτεραιότητα, ενώ διαθέτει και αρκετά άλλα ενδιαφέροντα χαρακτηριστικά Λόγοι που επιλέξαμε το Bootstrap Με την εξέλιξη των κινητών συσκευών, το να κατασκευαστεί ένα site,που να συμβαδίζει με τις νέες τεχνολογίες, είναι χρονοβόρο. Χρησιμοποιώντας μια έτοιμη τεχνολογική βάση που είναι ευέλικτη και χρησιμοποιεί σύγχρονα πρότυπα και έχει ελεγχθεί διεξοδικά, πετυχαίνουμε το καλύτερο, δυνατό αποτέλεσμα. 22

23 Εύκολο στη χρήση: Οποιοσδήποτε με βασικές γνώσεις HTML και CSS μπορεί να το χρησιμοποιήσει. Συμβατό με mobile συσκευές: Τις οποίες θέτει σε απόλυτη προτεραιότητα. Το site φαίνεται το ίδιο σε smartphones,tablets,desktops. Δημιουργία responsive website: Mπορούμε να κρύψουμε κάποιο περιεχόμενο ανάλογα με το μέγεθος της οθόνης. Προσθέτοντας για παράδειγμα μια κλάση.visible σε ένα στοιχείο, μπορούμε να το κάνουμε ορατό μόνο σε laptop. Συμβατότητα με όλους τους browsers: Σύστημα εκκίνησης που είναι συμβατό με όλα τα σύγχρονα προγράμματα περιήγησης (Google Chrome, Firefox, Internet Explorer, Safari, και Opera).Μια από τις προκλήσεις που συναντούνε οι προγραμματιστές είναι ότι το site φαίνεται διαφορετικό σε διαφορετικούς web browsers. Τεκμηρίωση: Όχι μόνο Bootstrap προσφέρει μορφοποίηση για σχεδόν κάθε στοιχείο μια τυπική ιστοσελίδα ή εφαρμογή web απαιτεί, παρέχει επίσης μια μεγάλη τεκμηρίωση με παραδείγματα και demo που μόνο καθιστούν εύκολο.δυνατό σε design και δομές. Βασική μορφοποίηση για τα περισσότερα στοιχεία HTML: Μια ιστοσελίδα που έχει πολλά διαφορετικά στοιχεία, όπως επικεφαλίδες, λίστες, πίνακες, κουμπιά, φόρμες, κλπ. Όλα αυτά τα βασικά στοιχεία της ΗTML έχουν μορφοποιηθεί και ενισχυθεί με επεκτάσιμες κλάσεις. 3 Σχεδιασμός για το πάνω μέρος του site Βήμα 1 ο 3.1 Επιλογή text editor Θα χρειαστούμε έναν text editor.επιλέξαμε το Sublime Text 3,που το κατεβάσαμε από αυτή την σελίδα Μας επιτρέπει να αλλάξουμε διαδραστικά πολλές γραμμές ταυτόχρονα, η μετονομασία μεταβλητών γίνεται με ευκολία, και να χειριστoύμε τα αρχεία ανεξάρτητα από το λειτουργικό σύστημα του υπολογιστή. 23

24 Βήμα 2 ο 3.2 Εγκατάσταση Βootstrap Εικόνα 8 Επιλογή text editor Επισκεπτόμαστε την σελίδα Από εκεί επιλέγουμε να κατεβάσουμε το Βootstrap. Εικόνα 9 Αρχική σελίδα Bootstrap 24

25 Εικόνα 10 Kατέβασμα Βootstrap Βήμα 3 ο Επιλογή Download Bootstrap. Στα έγγραφα του υπολογιστή μας εμφανίζεται ένα συμπιεσμένο αρχείο bootstrap dist.επιλέγουμε αποσυμπίεση καταλόγου dist και μετονομασία του σε my-site.αντιγραφή και επικόλληση στη επιφάνεια εργασίας. Βήμα 4 ο Άνοιγμα του καταλόγου my-site στο Sublime Text 3.Ανοίγουμε τον text editor και επιλέγουμε File >Open Folder >my-site. Παρατηρούμε ότι ο κατάλογος my-site έχει μέσα ήδη 3 φακέλους. Με ονόματα css,fonts και js. Εικόνα 11 O κατάλογος my-site στον text editor 25

26 Βήμα 5 ο Δημιουργία και αποθήκευση index file. Δεξί κλικ στον κατάλογο mysite>new file >Save as>index.html Εικόνα 12 Δημιουργία index.html 3.3 Bασικά στοιχεία της HTML Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνιση τους στην οθόνη. Τα ειδικά σύμβολα στην HTML λέγονται ετικέτες (tags). Η HTML διαθέτει ένα πεπερασμένο αριθμό ετικετών που μπορούμε να χρησιμοποιήσουμε. Ωστόσο ο αριθμός αυτός δεν παραμένει σταθερός. Κατά διαστήματα το W3 Consortium, το οποίο ανάπτυξε και διαχειρίζεται τα πρότυπα της HTML, δημοσιεύει νέα πρότυπα στα οποία προσθέτει καινούργιες ετικέτες που καλύπτουν ή διορθώνουν μια λειτουργία στο προηγούμενο πρότυπο. Η τελευταία αναθεώρηση του HTML προτύπου είναι η HTML5. 26

27 3.3.1 Πως λειτουργούνε οι ετικέτες Οι ετικέτες ελέγχουν την δομή και την μορφή του κειμένου της ιστοσελίδας. Επίσης παρέχουν πληροφορίες προς τον web browser για την σελίδα που πρόκειται να εμφανίσουν, όπως ο τίτλος της σελίδας ή ο συγγραφέας της. Οι ετικέτες μέσα σε ένα HTML αρχείο μπορούν να είναι γραμμένες είτε με μικρά γράμματα (πεζά), είτε με κεφαλαία. Η ετικέτα <b> είναι ίδια με τη ετικέτα <B>. Μόνο πρέπει να προσέχουμε τις ετικέτες τέλους να είναι γραμμένες όπως η ετικέτες αρχής. Δηλαδή αν μια ετικέτα αρχής είναι γραμμένη με πεζά τότε και η ετικέτα τέλους πρέπει να γραφεί με πεζά. Οι βασικές ετικέτες που θα δούμε είναι οι : <DOCTYPE html> Το Doctype πρέπει να είναι η πρώτη ετικέτα της ιστοσελίδας μας δηλαδή πρέπει να βρίσκεται πάνω από την ετικέτα <html>, γενικά θα μπορούσαμε να πούμε πως ενημερώνει τον web browser μας για την έκδοση της html που πρόκειται να χρησιμοποιήσουμε. <html> </html> Η ετικέτα html περιέχει όλες της ετικέτες της γλώσσας (εκτός από το DOCTYPE ) και ενημερώνει τον web browser ότι το αρχείο είναι ένα έγγραφο html. <head> </head> Η ετικέτα head όπως και η html περιέχει και αυτή κάποιες ετικέτες όπως κάποια styles,scripts, styles, meta information. <title> </title> Η ετικέτα title ορίζει τον τίτλο της σελίδας μας στον web browser αλλά και στις μηχανές αναζητήσεις στα αποτελέσματα που αναφέρονται στην ιστοσελίδα μας. <body> </body> Η ετικέτα body καθορίζει το κύριο κείμενο της σελίδας μας και περιέχει το περιεχόμενο της όπως κείμενο, πίνακες,εικόνες, κουμπιά κτλ. <h1> </h1> Η ετικέτα h1 χρησιμοποιείται όταν θέλουμε να καθορίσουμε html Επικεφαλίδες για να τονίσουνε κάτι, η h1 ορίζει την ποιο σημαντική επικεφαλίδα της σελίδας μας και εμφανίζεται με μεγαλύτερη γραμματοσειρά από τα άλλα headings,αντιθέτως το h6 καθορίζει την λιγότερη σημαντική επικεφαλίδα της σελίδας μας και 27

28 εμφανίζεται με την μικρότερη γραμματοσειρά από όλα τα άλλα headings. <p> </p> Η ετικέτα p χρησιμοποιείται για την δημιουργία παραγράφων. <br> Η ετικέτα br χρησιμοποιείται για την αλλαγή γραμμής. Στην ΗTML η ετικέτα br δεν έχει κλείσιμο γραμμής. Με την ετικέτα <link> ορίζουμε την σχέση μεταξύ του τρέχον εγγράφου με ένα εξωτερικό αρχείο φύλλου στυλ. Με αυτόν τον τρόπο μπορούμε να καθορίσουμε ένα ενιαίο στυλ για πολλαπλά HTML έγγραφα. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD> και καθορίζει τη σχέση μεταξύ του εγγράφου HTML και την εξωτερική πηγή. Σε αυτό το παράδειγμα, η παράμετρος href καθορίζει τη θέση της εξωτερικής εγγράφου ( στην περίπτωση αυτή σε σχέση με το τρέχον έγγραφο ) και το χαρακτηριστικό rel λέει το έγγραφο HTML της σχέσης της με την εν λόγω εξωτερικό έγγραφο. Σε αυτή την περίπτωση, καθώς είναι πιο συχνή με ετικέτες σύνδεσμο, η σχέση είναι ότι η εξωτερική έγγραφο είναι ένα στυλ για το έγγραφο HTML μας. Εικόνα 13 O ρόλος της ετικέτας link Η ιδιότητα href oρίζει την διεύθυνση του εξωτερικού αρχείου. Η ιδιότητα rel την σχέση του εξωτερικού αρχείου με το html αρχείο. Στην προκειμένη περίπτωση το css ορίζει το στυλ του html αρχείου. 28

29 3.4 Eπιλογή αρχικού template Πάμε getbootstrap.com >Examples για να επιλέξουμε το αρχικό template Εικόνα 14 Παραδείγματα με βασικά template Και επιλέγουμε αυτό που θεωρούμε ότι ταιριάζει με το website που θέλουμε να φτιάξουμε. Επέλεξα το Jumbotron template,στην πορεία όμως θα γίνουνε βασικές αλλαγές. Εικόνα 15 Επιλογή αρχικού template Δεξί κλικ στο template > Προβολή πηγαίου κώδικα. Ο κώδικας είναι αυτός: <!DOCTYPE html> 29

30 <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initialscale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>jumbotron Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="jumbotron.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-filewarning.js"></script><![endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script > <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data- 30

31 toggle="collapse" data-target="#navbar" aria-expanded="false" ariacontrols="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" placeholder=" " class="form-control"> <div class="form-group"> <input type="password" placeholder="password" class="formcontrol"> <button type="submit" class="btn btn-success">sign in</button> </form> <!--/.navbar-collapse --> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> <h1>hello, world!</h1> <p>this is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">learn more»</a></p> <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> 31

32 <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <hr> <footer> <p> Company 2014</p> </footer> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">< 32

33 /script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> Παίρνω τον κώδικα με αντιγραφή και επικόλληση μέσα στο index.html >Save. Εικόνα 16 O κώδικας του Jumbotron στο index.html Στην συνέχεια δεξί κλικ στο index.html >Open Containing Folder Εικόνα 17 Με διπλό κλικ πάνω στο index βλέπουμε το site στον browser 33

34 Διπλό κλικ πάνω στο index και παρατηρούμε ότι το site που βλέπουμε δεν έχει καμία σχέση με το Jumbotron template που διαλέξαμε. Εικόνα 18 Τι βλέπουμε στην οθόνη όταν δεν έχουνε φτιαχτεί τα css μονοπάτια 3.5 Ρύθμιση CSS μονοπατιών Μέσα στο index.html αλλαγή αυτού : <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> Σε αυτό: <link href="css/bootstrap.min.css" rel="stylesheet"> Με άλλα λόγια λέμε στο πρόγραμμα περιήγησης πώς να να πάει στο σωστό css αρχείο ξεκινώντας από το index.html φάκελο. Λέμε στον browser να ψάξει τον css φάκελο που βρίσκεται στον my-site κατάλογο και μετά να βρεί το bootstrap.min.css Ένα αρχείο "min" είναι μία ελαχιστοποιημένη έκδοση ενός αρχείου. Έτσι, αντί για μια σύνδεση σε ένα αρχείο.css θα συνδέσουμε με ένα min.css αρχείο. Αυτό που κάνει μία ελαχιστοποιημένη έκδοση ενός αρχείου είναι να αφαιρέσει όλα το περιττό χώρο και τις αλλαγές γραμμών, έτσι ώστε το πρόγραμμα περιήγησης να μπορεί να διαβάσει το αρχείο πιο γρήγορα και έτσι να φορτώνει γρηγορότερα το site σας. Μέσα στον φάκελο css υπάρχουνε 5 αρχεία.τα εξής: bootstrap-theme.css bootstrap-theme.css.map 34

35 bootstrap-theme.min.css bootstrap.css bootstrap.css.map bootstrap.min.css Tα τέσσερα πρώτα δεν χρειάζονται, οπότε σβήνονται. Στη συνέχεια πατάω δεξί κλικ στον φάκελο css και δημιουργώ νέο φάκελο που τον ονομάζω custom.css Εικόνα 19 Δημιουργία του css Ξαναπηγαίνω στον πηγαίο κώδικα της σελίδας,κάνω κλικ πάνω στο jumbotron.css,παίρνω τον κώδικα που έχει μέσα και με αντιγραφή επικόλληση τον τοποθετώ μέσα στο custom.css 35

36 Εικόνα 20 Διπλό κλικ πάνω στο jumbotron.css για να πάρω τον κώδικα O κώδικας είναι αυτός: /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; padding-bottom: 20px; } Στο αρχείο index.html αλλαγή αυτού: <link href="jumbotron.css" rel="stylesheet"> σε αυτό: <link href="css/custom.css" rel="stylesheet"> 3.6 Επιλογή δεύτερου template Βρίσκω άλλο template στο οποίο να μου αρέσει η μπάρα περιήγησης στο site από το getbootstrap.com >Examples > Starter Template. Επιλέγω αυτό: 36

37 Εικόνα 21 Eπιλογή δεύτερου template Η δυνατότητα να δούμε τον κώδικα του συγκεκριμένου template, με το View Page Source,υπάρχει, αλλά δεν γνωρίζουμε ποιο κομμάτι αντιστοιχεί στην μπάρα περιήγησης.με δεξί κλικ στη σελίδα>inspect Element βρίσκουμε ότι ο κώδικας που αναζητούμε είναι αυτός και τον αντικαθιστούμε: Εικόνα 22 Εύρεση κώδικα που ατιστοιχεί στην μπάρα περιήγησης Αλλαγή αυτού: <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> 37

38 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> <div class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder=" " class="form-control"> <div class="form-group"> <input type="password" placeholder="password" class="form-control"> <button type="submit" class="btn btn-success">sign in</button> </form> <!--/.navbar-collapse --> Σε αυτό: <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> 38

39 <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> <!--/.nav-collapse --> Aλλαγή στο όνομα του site: Μέσα index.html αλλαγή αυτού: <a class="navbar-brand" href="#">project name</a> σε <a class="navbar-brand" href="#">my site</a> Mετακίνηση των links δεξιά: Στα components του bootstrap βρίσκουμε ότι υπάρχει κλάση με το όνομα "navbar-right".προσθέτουμε την κλάση "navbar-right στην ετικέτα "ul". Μέσα στο index.html βάζουμε: <ul class="nav navbar-nav navbar-right"> Αλλαγή στα ονόματα των li ετικετών: Στο index.html αλλαγή: <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> σε <ul class="nav navbar-nav navbar-right"> <li class= active ><a href="#about">who WE ARE</a></li> <li><a href="#contact">get INVOLVED</a></li> </ul> 39

40 Εικόνα 23 Το site με την νέα γραμμή περιήγησης 3.7 Διαφορές των ετικετών Τα περισσότερα στοιχεία HTML ορίζονται ως στοιχεία επιπέδου, (block elements) ή εμβόλιμα στοιχεία (inline elements).tα στοιχεία επιπέδου μπλοκ ξεκινούν με μια νέα γραμμή, όταν εμφανίζονται σε ένα πρόγραμμα περιήγησης. Εκτός αν έχει υπάρξει το στυλιζάρισμά τους με css. Παραδείγματα με block elements: <h1>, <p> <ul>, <table> Παραδείγματα με inline elements: <b>, <td>, <a>, <img> Το div ορίζει διαφορετικά τμήματα μέσα στη σελίδα.συνήθως για την ομαδοποίηση των block elements και την μορφοποίησή τους με css. 3.8 Δομές δέντρων σε HTML αρχεία Η δομή ενός ΗTML αρχείου θυμίζει δομές δέντρων. Κάθε στοιχείο έχει ένα γονικό στοιχείο. Μια ετικέτα μπορεί να έχει ένα παιδί ( ή τα παιδιά ).Το ότι υπάρχει εσοχή μέσα σε ένα έγγραφο δεν καθορίζει αν ένα στοιχείο είναι ένα παιδί ή είναι γονιός. Καθορίζει την οργάνωση του εγγράφου. Στο παραπάνω παράδειγμα το div με την κλάση navbar είναι γονιός του div με την κλάση container. Η ετικέτα ul είναι παιδί του div με 40

41 την κλάση collapse και navbar-collapse. Την ίδια ώρα το ul είναι γονιός των δυo li HTML ετικετών. Τέλος η κλάση container κρατάει όλο το site ευθυγραμμισμένο με συγκεκριμένο πλάτος Σχόλια στην HTML Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα. Δεν εμφανίζονται στην οθόνη του browser. Ένας λόγος για να χρησιμοποιήσουμε σχόλια μέσα σε ένα html αρχείο είναι να γράψουμε την ημερομηνία που δημιουργήσαμε το αρχείο. Ένα σχόλιο αρχίζει με το <!-- και τελειώνει με το --> 3.9 Τι είναι οι λίστες Στην σελίδα μας μπορούμε να εισάγουμε λίστες. Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το ul είναι τα δύο πρώτα γράμματα από το Unordered List. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα type της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα type είναι οι εξής: disc, circle, square. Η ετικέτα <ol> εισάγει μια αριθμημένη λίστα στην σελίδα μας, Το ol είναι τα δύο πρώτα γράμματα από το Ordered List. Η ιδιότητα type της ετικέτας <ol> ορίζει τον τύπο της ταξινόμησης. Οι τιμές που παίρνει η ιδιότητα type είναι οι εξής: A, a, I, i. Ενημέρωση h1 επικεφαλίδας: Στο index.html αλλαγή αυτού: <h1>hello, world!</h1> σε αυτό: <h1>our goal is to inspire <br>people to stop bullying<br> </h1> Ενημέρωση παραγράφου: Στο index.html αλλαγή : <p>this is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 41

42 σε <p>bullying is unwanted, aggressive behavior among school aged children that involves a real or perceived <strong>power imbalance.</strong> The behavior is repeated, or has the potential to be repeated, over time. Both kids who are bullied and who bully others may have serious, lasting problems. </p> Ευθυγράμμιση κειμένου για το div με την κλάση jumbotron Στο css/custom.css γράφουμε:.jumbotron { text-align: center; } Αυτή η εντολή σημαίνει για κάθε div με την κλάση jumbotron ευθυγράμμισε στο κέντρο. Το text-align είναι η ιδιότητα και center είναι η τιμή. Κανόνας στη CSS. Αλλαγή χρώματος κουμπιού σε κόκκινο Στο index.html αντικατάσταση αυτού: <a class="btn btn-primary btn-lg" role="button">learn more»</a> σε αυτό: <a class="btn btn-danger btn-lg" role="button">get Involved</a> 42

43 Μετά από αυτές τις αλλαγές το site μας δείχνει έτσι: Εικόνα 24 Αλλαγές στην κλάση jumbotron Για να γίνει το κουμπί κινδύνου μεγαλύτερο στο css/costume.css.btn-lg { font-size: 36px? } 3.10 Τρόποι με τους οποίους συμπεριλαμβάνουμε την CC3 Εξωτερικά όπως έχουμε κάνει στο με το css/custom.css Εσωτερικά - προσθέτοντας την εντολή μέσα στην ετικέτα <head> </head> Είτε δίπλα στην γραμμή που μας ενδιαφέρει χρησιμοποιώντας την ετικέτα <style> </style> Οι εξωτερικές και εσωτερικές αλλαγές έχουν την ίδια προτεραιότητα. Εάν οι επιλογείς είναι η ίδιοι, τότε η τελευταία εντολή θα έχει πάντα προτεραιότητα. Για παράδειγμα, εάν είχατε: p { color: red } p { color: blue } Το κείμενο στο πλαίσιο του p στοιχεία θα έχουν μπλε χρώμα, διότι ο κανόνας αυτός ήρθε τελευταίος. 43

44 3.11 Εξειδίκευση (Specificity) Αν έχουμε δύο ή περισσότερους αντικρουόμενους κανόνες CSS που να δείχνουν το ίδιο στοιχείο, υπάρχουν κάποιοι βασικοί κανόνες που ακολουθεί ένα πρόγραμμα περιήγησης για να καθορίσουν ποια είναι η πιο συγκεκριμένη και ως εκ τούτου κερδίζει έξω. Όσο πιο συγκεκριμένη είναι μια εντολή τόσο μεγαλύτερη προτεραιότητα έχει. Για παράδειγμα αν είχαμε τις εξής εντολές που αντικρούονται:.jumbotron { color:red }.jumbotron h1{color :blue} Μεγαλύτερη προτεραιότητα έχει η δεύτερη που είναι και πιο συγκεκριμένη (Override). Έτσι για κάθε div με την κλάση jumbotron θα είχαμε το κόκκινο χρώμα αλλά εκεί που θα υπήρχε η επικεφαλίδα h1 θα είχαμε το μπλε χρώμα. Δηλαδή η δεύτερη εντολή γράφει πάνω στην πρώτη. Γενικά όμως από αυτές τις τρείς μεθόδους μεγαλύτερη προτεραιότητα έχει όταν κάνουμε το στυλιζάρισμα της σελίδας, να εφαρμόσουμε αλλαγές css δίπλα στην γραμμή που μας ενδιαφέρει. Σε μεγάλα αρχεία όμως,για να πετύχουμε σύντομες αλλαγές χρησιμοποιούμε τον εξωτερικό τρόπο εφαρμογής του css Συμπεριλαμβάνουμε Αrvo γραμματοσειρά. Επιλέγουμε Google >Fonts >Arvo >Add to Collection>Use 44

45 Εικόνα 25 Επιλογή Arvo γραμματοσειράς Μέσα στο index.html πάνω από τις εντολές css προσθέτουμε : <link href='http://fonts.googleapis.com/css?family=arvo' rel='stylesheet' type='text/css'> Φτιάχνω CSS κανόνα για ul.nav και.jumbotron h1 ώστε να έχουνε αυτή τη γραμματοσειρά. css/custom.css ul.nav,.jumbotron h1 { font-family: Arvo, courier, serif; } Για κάθε ul με την κλάση nav και για κάθε επικεφαλίδα h1 που βρίσκεται μέσα σε div με την κλάση jumbotron χρησιμοποίησε την Arvo γραμματοσειρά. Το div μπροστά από την κλάση jumbotron θα μπορούσαμε να το γράψουμε αλλά δεν χρειάζεται. Γιατί η κλάση jumbotron υπάρχει μόνο μέσα σε div στον δικό μας κώδικα Ιδιότητες χαρακτήρων και γραμματοσειρές Η ιδιότητα font-size ορίζει το μέγεθος της γραμματοσειράς. Οι δύο πιο κοινές μονάδες μέτρησης CSS είναι τα px και τα em. Στη πρώτη περίπτωση έχουμε απόλυτη μονάδα μέτρησης και στη δεύτερη σχετική. 45

46 Για παράδειγμα : 1em είναι το τρέχον μέγεθος της γραμματοσειράς και 2em είναι δύο φορές το τρέχον μέγεθος της γραμματοσειράς. Η ιδιότητα font-weight.η ιδιότητα αυτή καθορίζει το πάχος των χαρακτήρων στο κείμενο που εμφανίζονται. Οι απλές τιμές που μπορεί να πάρει είναι normal, lighter, bold, bolder.επίσης μπορούμε να χρησιμοποιήσουμε συγκεκριμένη κλίμακα γύρω στο Για παράδειγμα αν είχαμε τις εντολές p { font-weight: 100; } και p { fontweight: 900; } Στην πρώτη περίπτωση το πάχος είναι το μικρότερο δυνατό ενώ στη δεύτερη το μεγαλύτερο δυνατό. Η ιδιότητα line-height.η ιδιότητα αυτή καθορίζει το ύψος των γραμμών. Για παράδειγμα η εντολή.jumbotron h1 { line-height: 2px; } σημαίνει για κάθε επικεφαλίδα h1 που βρίσκεται μέσα σε div με την κλάση jumbotron,κάνε το ύψος των γραμμών 2 φορές μεγαλύτερο σε σχέση με το h Τι είναι το Box Model και πως λειτουργεί Όλα τα στοιχεία HTML μπορούνε να θεωρηθούνε κουτιά. Στην CSS, ο όρος "box model" χρησιμοποιείται όταν μιλάμε για το σχεδιασμό και τη διάταξη. Είναι ουσιαστικά ένα κουτί που τυλίγεται γύρω από στοιχεία HTML, και αποτελείται από: το πραγματικό περιεχόμενο content, την επένδυση padding τα σύνορα και το περιθώριο. Το box model μας επιτρέπει να προσθέσoυμε ένα περίγραμμα γύρω από τα στοιχεία, και να καθορίσουμε το διάστημα μεταξύ των στοιχείων. Η παρακάτω εικόνα απεικονίζει το box model: 46

47 Εικόνα 26 Τρόπος λειτουργίας του Box Model Περιεχόμενο - Το περιεχόμενο του κουτιού, όπου εμφανίζεται το κείμενο και τις εικόνες Επένδυση - Διαγράφει μια περιοχή γύρω από το περιεχόμενο. Η επένδυση είναι διαφανής Σύνορα - Ένα περίγραμμα που πηγαίνει γύρω από την επένδυση και το περιεχόμενο Περιθώριο - Διαγράφει μια περιοχή έξω από τα σύνορα. Το περιθώριο είναι διαφανές Παρατηρούμε ότι το περιεχόμενο και το padding είναι εντός συνόρων. Ενώ το περιθώριο είναι εκτός. Χρησιμοποιούμε το padding αν θέλουμε να προσθέσουμε χώρο μέσα στο σύνορο, ενώ το margin χρησιμοποιείται όταν θέλουμε να προσθέσουμε χώρο εκτός αυτού. 47

48 Πλάτος και ύψος ενός html στοιχείου Για να ρυθμίσετε σωστά το πλάτος και το ύψος ενός στοιχείου σε όλους τους browsers, θα πρέπει να γνωρίζουμε πώς λειτουργεί το box model. Το συνολικό πλάτος ενός στοιχείου θα πρέπει να υπολογίζεται ως εξής: Συνολικό πλάτος στοιχείου = πλάτος + (αριστερό + δεξί) padding + (αριστερό + δεξί) border + (αριστερό + δεξί) margin Το συνολικό ύψος του στοιχείου θα πρέπει να υπολογίζεται ως εξής: Συνολικό ύψος στοιχείου = ύψος + (άνω + κάτω) padding + (άνω + κάτω) border + (άνω + κάτω) margin Αλλαγή των ετικετών <li> σε <ul> ώστε να είναι μικρότερα Στο css/custom.css προσθέτουμε: ul.nav { font-size: 13px; } Συμπεριλαμβάνουμε το σωστό περιθώριο για το.jumbotron <h1> and <p>. Στο css/custom.css προσθέτουμε:.jumbotron h1 { margin-top: 0px; margin-bottom: 50px; }.jumbotron p { margin-bottom: 30px; } 4 Άμεση και σχετική διευθυνσιοδότηση 4.1 Εισαγωγή εικόνων Mε δεξί κλικ στον κατάλογο my-site,και φτιάχνω κατάλογο 48

49 images. Eκεί μέσα αποθηκεύω τις εικόνες που θέλω. Συμπεριλαμβάνω την εικόνα girl.jpg.mέσα στο index.html γράφω στην γραμμή κάτω από το κουμπί. <img src="images/girl.jpg" title="bullying girl" alt="bullying girl"> Η ιδιότητα alt μας δείχνει τι θα φαίνεται στον browser εαν η εικόνα δεν φορτώσει σωστά. Eνώ η ιδιότητα title τι θα φαίνεται στoν browser αν το site μας παίζει σωστά και περάσει παρατεταμένα πάνω από την εικόνα το ποντίκι του υπολογιστή. Αυτές οι επιλογές είναι προαιρετικές αλλά βοηθάνε τους επισκέπτες της σελίδας στην περίπτωση που δεν μπορούνε να δούνε την εικόνα, να διαβάζουνε τουλάχιστον τι θα έπρεπε να υπάρχει στο συγκεκριμένο σημείο. Κάθε ΗTML ετικέτα έχει ένα σύνολο από ιδιότητες, τις οποίες μπορούμε να βρούμε στο w3schools.com. Εισαγωγή εικόνας για το background και αποθήκευσή της σαν freedom_woman.jpg.mέσα στο css/custom.css γράφουμε:.jumbotron { text-align: center; background-image: url('../images/freedom_woman.jpg'); } Το../ λέει στον browser να βγεί απο αυτό τον κατάλογο.δηλαδή είμαστε στον φάκελο custom.css άρα στον κατάλογο CSS. Bγες απο τον κατάλογο CSS και βρίσκεσαι στο my-site. Aπο εκεί του λέμε να βρεί τον κατάλογο images,και την εικόνα freedom_woman.jpg Αλλαγή χρώματος γραμματοσειράς. Μέσα στο css/custom.css.jumbotron { text-align: center; background-image: url("../images/hero_image.jpg"); color: white; } Διόρθωση πάχος γραμμών, μέγεθος γραμματοσειράς και (padding and margin).μέσα στο css/custom.css γράφουμε: 49

50 .jumbotron h1 { margin-top: 0px; margin-bottom: 50px; }.jumbotron p { margin-bottom: 30px; font-weight: 100; padding: 0 50px; } Προσθήκη εικόνας stop bullying. Aποθήκευση της εικόνας στον κατάλογο images,ως logo.png.στο index.html αλλαγή : <a class="navbar-brand" href="#">project Name</a> σε <a class="navbar-brand" href="#"><img src="images/logo.png" alt="stop bullying"></a> Μετά από αυτές τις αλλαγές το site μας έχει διαμορφωθεί έτσι: Εικόνα 27 Το site μετά από την εισαγωγή εικόνων 50

51 4.2 Τι είναι Grid system και που χρησιμεύει Η σημασία του πλέγματος είναι ιδιαίτερα σημαντική, για την καλή παρουσίαση ενός website. Kάθε web developer συνειδητά ή ασυνείδητα χρησιμοποιεί πλέγματα, για την καλύτερη οργάνωση των στοιχείων. Το Bootstrap,χωρίζει το site σε 12 στήλες. Ο πίνακας παραπάνω δείχνει πως χωρίζουμε ένα site με μέγεθος 940 px,σε στήλες. Μπορεί να γίνει και ομαδοποίηση των στηλών,ανάλογα με την επιλογή μας. Εικόνα 28 Το Grid system του Βootstrap To grid system του Bootstrap επιτρέπει έως και 12 στήλες σε όλη τη σελίδα. Οι στήλες θα αναδιαταχθούν ανάλογα με το μέγεθος της οθόνης. Σε μεγάλες οθόνες καλό είναι να χρησιμοποιούμε 3 divs με 4 στήλες το καθένα. Έτσι, για να δημιουργήσουμε τη διάταξη που θέλουμε φτιάχνουμε την κλάση container ( <div class="container"> ). Στη συνέχεια, δημιουργoύμε την κλάση row ( <div class="row"> ) η οποία οπωσδήποτε πρέπει να βρίσκεται μέσα στην "container".τέλος προσθέτουμε τον κατάλληλο αριθμό στηλών οι οποίες δεν πρέπει σαν άθροισμα να ξεπερνάνε τον αριθμό 12.Μόνο οι στήλες είναι άμεσα παιδιά της κλάσης row στην δομή του δέντρου. Μέσα στις στήλες γράφουμε το περιεχόμενο. Μέσα στο index.html αλλαγή αυτού του κώδικα: <div class="row"> <div class="col-md-4"> <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce 51

52 dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> Σε αυτό: <div class="row"> <div class="col-md-4"> <h2>students</h2> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help. </p> <p><a class="btn btn-default" href="#" role="button">start 52

53 Speaking»</a></p> <div class="col-md-4"> <h2>educators</h2> <p>respond when bullying happens. Learn how to stop it on the spot, find out what happened, and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> <div class="col-md-4"> <h2>parents</h2> <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child Click to get involved.</p> <p><a class="btn btn-default" href="#" role="button">give Support»</a></p> <a> 4.3 Διαφορές μεταξύ απόλυτης και σχετικής διεύθυνσης URL Σύνδεση με απόλυτες διευθύνσεις Μια απόλυτη διεύθυνση URL παίρνει συνήθως την ακόλουθη μορφή: πρωτόκολλο: // τομέας / μονοπάτι Το protocol είναι συνήθως αλλά μπορεί επίσης να είναι https://, ftp://, gopher:// ή file://. Το domain είναι το όνομα της ιστοσελίδας. Για παράδειγμα, το όνομα τομέα του κεντρικού web server του Πανεπιστημίου της Ιντιάνα είναι Το μονοπάτι path περιλαμβάνει πληροφορίες καταλόγου και αρχείου. Θα πρέπει να χρησιμοποιούνται απόλυτες διευθύνσεις όταν αναφέρομαστε σε συνδέσεις μέσα σε διαφορετικούς διακομιστές. Σύνδεση με σχετικές διευθύνσεις URL 53

54 Οι Σχετικές διευθύνσεις URL μπορούνε να πάρουνε διάφορες μορφές. Όταν γίνεται αναφορά σε ένα αρχείο που εμφανίζεται στον ίδιο κατάλογο με τη συγκεκριμένη σελίδα, μια διεύθυνση URL μπορεί να είναι τόσο απλή όσο το όνομα του αρχείου. Για παράδειγμα, εάν θέλετε να δημιουργήσετε ένα σύνδεσμο ανάμεσα στην αρχική σελίδα σας και στο αρχείο foobar.html, το οποίο βρίσκεται στον ίδιο κατάλογο με αυτήν. Γράφετε: <a href="foobar.html"> κείμενο </a> Όταν γίνεται αναφορά σε ένα αρχείο που βρίσκεται σε υποκατάλογο,του ίδιου καταλόγου με την σελίδα μας. Αρκεί να εισάγουμε πληροφορίες καταλόγου και το όνομα του αρχείου. Έτσι, αν foobar.html ήταν μέσα στο foobar φάκελο,ο οποίος είναι στον ίδιο κατάλογο με την σελίδα μας, μπορούμε να γράψουμε: <a href="foobar/foobar.html"> κείμενο </a> Εάν το αρχείο που θέλετε να συνδέσετε βρίσκεται σε υψηλότερο κατάλογο, χρησιμοποιείστε.., πράγμα που σημαίνει να ανεβεί ένα κατάλογο. Για παράδειγμα, για να συνδέθείτε από το foobar.html, το οποίο βρίσκεται στον παραπάνω κατάλογο,με την σελίδα home.html, μπορείτε να χρησιμοποιήσετε: <a href="../home.html"> κείμενο </a> 4.4 Google Drive και Google Forms Το Google Drive είναι υπηρεσία αποθήκευσης και συγχρονισμού αρχείων που παρέχεται από την Google, κυκλοφόρησε τον Απρίλιο του 2012, και επιτρέπει τον διαμοιρασμό αρχείων. Τα αρχεία αυτά μπορούν να αναζητηθούν με μηχανές αναζήτησης. Οι φόρμες Google είναι ένα δωρεάν εργαλείο για την αλληλεπίδραση των επισκεπτών με τον διαχειριστή του site.μας παρέχουνε την δυνατότητα να βγάλουμε εύκολα στατιστικά αποτελέσματα. Στις παρακάτω εικόνες βλέπουμε βήμα προς βήμα πως δημιουργούμε την φόρμα. Το link το χρησιμοποιούμε, για την σύνδεση του site με την φόρμα. Εμείς επιλέξαμε για όποιον πατήσει το κουμπί Start Speaking,να του εμφανίζει σε νέο παράθυρο μια φόρμα συμπλήρωσης . 54

55 Εικόνα 29 Συμπλήρωση φόρμας στο Google Drive Αναλυτική εξήγηση με σχήματα για το πώς φτιάχνονται οι φόρμες Google. Εικόνα 30 Eπιλογή Google Drive 55

56 Εικόνα 31 Δημιουργία Google account Εικόνα 32 Δημιουργία φόρμας 56

57 Εικόνα 33 Επιλογή τίτλου και θέματος Εικόνα 34 Eαν δεν υπάρχουνε άλλες ερωτήσεις επιλέγουμε Done 57

58 Εικόνα 35 Χρησιμοποίηση του link στο site μας 4.5 Φόρμα συμπλήρωσης Eμείς στο δικό μας site επιλέξαμε όταν οι μαθητές πατάνε το κουμπί Start Speking να εμφανίζεται σε νέο παράθυρο μια φόρμα συμπλήρωσης . Aυτό το κάναμε με την εντολή: <p><a class="btn btn-default" href="https://docs.google.com/forms/d/1po_jobhofjn7iwmima pwpambzlvlqgxxn1lr2v9v_gc/viewform? usp=send_form " target"_blank" role="button">start Speaking»</a></p> Mέσα στο href είναι ο κωδικός που πήραμε με Control+C απο την δημιουργία φόρμας. Ενώ το " target"_blank" σημαίνει άνοιξε την φόρμα σε νέο παράθυρο. 4.6 Άμεση διευθυνσιοδότηση Επιλέξαμε όταν οι εκπαιδευτικοί πατάνε το κουμπί Join The Iniative, να τους μεταφέρει στην αρχική σελίδα google.αυτό το κάναμε με την εντολή αυτή: 58

59 <p><a class="btn btn-default" href="http://google.com" role="button">join The Iniative»</a></p> 4.7 Έμμεση διευθυνσιοδότηση Επιλέξαμε όταν οι γονείς πατάνε το κουμπί Give Support,να τους μεταφέρει στο Grid System.To Grid System είναι φάκελος που δημιουργήσαμε εμείς,και βρίσκεται στον κατάλογο my-site. <p><a class="btn btn-default" href="grid.html" role="button">give Support»</a></p> 5 Σχεδιασμός για το κάτω μέρος του site 5.1 Η χρησιμότητα του Font-awesome Το Font-awesome μας επιτρέπει να συμπεριλάβουμε στο site μας επαγγελματικές εικόνες δωρεάν. Επισκεπτόμαστε τη σελίδα Awesome/ και κατεβάζουμε το συμπιεσμένο αρχείο Font-awesome. Αποσυμπίεση του φακέλου και μετονομασία του σε font-awesome.αυτό τον φάκελο,με αντιγραφή-επικόλληση τον τοποθετούμε μέσα στον κατάλογο my-site στον φάκελο των fonts.συμπεριλαμβάνουμε το fontawesome μέσα στο index.html 59

60 Μέσα στο index.html προσθήκη <link rel="stylesheet" href="fonts/font-awesome/css/font awesome.min.css"> Μέσα στο index.html αλλαγή αυτού του κώδικα: <div class="row"> <div class="col-md-4"> <h2>students</h2> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help.</p> <p><a class="btn btn-default" href="#" role="button">start Learning»</a></p> <div class="col-md-4"> <h2>educators</h2> <p>respond when bullying happens. Learn how to stop it on the spot,and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> <div class="col-md-4"> <h2>parents</h2> <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child. Click to get involved.</p> <p><a class="btn btn-default" href="#" role="button">give 60

61 Support»</a></p> Σε αυτόν: <div class="row"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-user fa-stack-1x fa-inverse"></i> </span> <h2>students</h2> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help.</p> <p><a class="btn btn-default" href="#" role="button">start Learning»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h2>educators</h2> <p>respond when bullying happens. Learn how to stop it on the spot,and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-money fa-stack-1x fa-inverse"></i> </span> <h2>parents</h2> <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child. Click to get involved.</p> 61

62 <p><a class="btn btn-default" href="#" role="button">give Support»</a></p> Έτσι στο site μας, το κάτω μέρος μετά την προσθήκη των εικονιδίων,είναι έτσι: Εικόνα 36 Προσθήκη εικονιδίων στο κάτω μέρος του site Τι είναι η ετικέτα span και που χρησιμεύει Όπως χρησιμοποιούμε την ετικέτα <div> για την ομαδοποίηση των block elements και την μορφοποίησή τους με css. Έτσι χρησιμοποιούμε και την ετικέτα <span>,αλλά για τα inline elements. H ετικέτα αυτή, δεν μπορεί να κάνει οπτική αλλαγή από μόνη της. Το κείμενο όμως που περικλείεται από αυτήν, μπορούμε να το μορφοποιήσουμε με css ή να το χειριστούμε με Javascript. 5.2 Η μορφοποίηση του τμήματος Get Ιnvolved. Σε αυτό το μέρος της εργασίας θα δούμε ιδιότητες της CSS και πώς τον ίδιο CSS κανόνα μπορούμε να τον εφαρμόσουμε σε διαφορετικά ΗΤML στοιχεία. Mέσα στο index.html βάζω το τμήμα Get Involved μέσα στο div με την κλάση container.το Get involved δεν μπορεί να τοποθετηθεί 62

63 ανάμεσα σε < div class="row"> <div class="col-md-4"> Γιατί βασικός κανόνας του Grid System είναι οτι μόνο οι στήλες είναι άμεσα παιδιά των γραμμών. Aλλαγή αυτού του κώδικα: <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-user fa-stack-1x fa-inverse"></i> </span> <h2>students</h2> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help.</p> <p><a class="btn btn-default" href="#" role="button">start Learning»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h2>educators</h2> <p>respond when bullying happens. Learn how to stop it on the spot,and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-money fa-stack-1x fa-inverse"></i> </span> <h2>parents</h2> 63

64 <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child. Click to get involved.</p> <p><a class="btn btn-default" href="#" role="button">give Support»</a></p> <hr> <footer> <p> Company 2014</p> </footer> <!-- /container --> Σε αυτόν <div class="container homepage"> <h2>get Involved</h2> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-user fa-stack-1x fa-inverse"></i> </span> <h3>students</h3> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help <p><a class="btn btn-default" href="#" role="button">start Speking»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h3>educators</h3> <p>respond when bullying happens. Learn how to stop it on the spot,and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> 64

65 <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-money fa-stack-1x fa-inverse"></i> </span> <h3>parents</h3> <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child. Click to get involved.</p> <p><a class="btn btn-default" href="#" role="button">give Support»</a></p> <hr> <footer> <p> Company 2014</p> </footer> <!-- /container --> Ευθυγράμμιση στο κέντρο για γραμματοσειρές και μορφοποίηση των h2 και h3 επικεφαλίδων στο τμήμα του Get Involved. Mέσα στο css/custom.css προσθήκη.homepage { text-align: center; }.homepage h2,.homepage h3 { font-family: Arvo, courier, serif; color: #e74c3c; text-transform: uppercase; }.homepage h2 { font-size: 30px; }.homepage h3 { font-size: 26px; }.homepage p { font-size: 21px; font-weight: 300; 65

66 }.homepage a { color: #e74c3c; } Μπορούμε να δώσουμε σε μια ετικέτα HTML πολλές κλάσεις χωρίζοντάς τες με κενό.στο παράδειγμα <div class="container homepage">. Το <div> έχει δύο κλάσεις homepage και container. Χρώματα και σκίαση Τα χρώματα που χρησιμοποιήθηκαν για την κατασκευή του site,είναι απο το Είναι προτιμότερο να χρησιμοποιούμε δεκαεξαδικές τιμές για να έχουμε απεριόριστους συνδυασμούς στα χρώματα και διαφορετικές σκιάσεις. Έτσι μετά τις αλλαγές αυτές, το κάτω μέρος του site είναι έτσι: Εικόνα 37 Η μορφοποίηση του τμήματος Get Involved Συμπεριλαμβάνουμε μέσα στο index.html το <hr> κάτω απο το <h2>get Involved</p> Μέσα στο css/custom.css τοποθετούμε:.homepage hr { border-top: 1px solid #e74c3c; width: 150px; margin-top: 15px; } Αν θέλουμε να ευθυγραμμίσουμε ένα block element στο μέσο του γονικού element, πρέπει να του δώσουμε αριστερή και δεξιά τιμή 66

67 margin.για παράδειγμα 10px auto.σε αυτή την περίπτωση θα έχει πάνω και κάτω margin και θα ευθυγραμμιστεί. Εάν θέλουμε να κάνουμε μορφοποίηση γραμμής και θέλουμε να έχει συγκεκριμένο πλάτος είναι προτιμότερο να χρησιμοποιούμε px αντί για <hr>.γιατί το hr είναι σχετικό με το div με την κλάση container. 5.3 Δημιουργία του τμήματος Who We Are Μέσα index.html γράφουμε: <div class="container homepage"> <h2>who We Are</h2> <hr> <p>we are <a href="http://www.ie.teicrete.gr" target="_blank">applied Informatics School and Multimedia</a>. We aim to incorporate the topic of bullying prevention in lessons and activities. </p> Τοποθέτηση εικόνας του Τμήματος Μηχανικών Πληροφορικής. Μέσα στο index.html <img src="images/tei_logo" title="ατει Crete" alt="atei Crete"> Μέσα στον φάκελο css/custom.css.homepage a:hover { color: #e74c3c; text-decoration: none; opacity:.8; } Οι ψευδοκλάσεις χρησιμοποιούνται για να περιγράψουν μια συγκεκριμένη κατάσταση ενός html στοιχείου. Για παράδειγμα μπορούν να χρησιμοποιηθούν για την μορφοποίηση ενός στοιχείου όταν το ποντίκι περάσει πάνω απο αυτό. 67

68 Η ιδιότητα opacity μας δείχνει την διαφάνεια σε ένα αντικείμενο. Το opacity:.8 μας λέει οτι είναι 20% διαφανές το αντικείμενο. Αλλαγή χρώματος background. Μέσα στο index.html κάτω απο την εικόνα του ΤΕΙ και πάνω απο το div με την κλάση container βάζω το <div id="get-involved">. Έτσι το χρώμα να φτάνει σε όλο το πλάτος της σελίδας. Μέσα στο css/custom.css προσθήκη #get-involved { background-color: #f5f5f5; } Προσθήκη χώρου ανάμεσα στα Who We are και το Get Involved Mέσα στο css/custom.css προσθήκη.homepage { text-align: center; padding-bottom: 50px; padding-top: 40px } Όταν αναφερόμασταν σε divs στο custom.css γράφαμε.όνομα κλάσης ενώ όταν γράφουμε για IDs βάζουμε #.Όπως στο παράδειγμα με #get-involved. Διαφορά ΙD και κλάσης. Xρησιμοποιούμε ΙD όταν έχουμε ένα μοναδικό αντικείμενο που έχει την δική του μορφοποίηση. Ενώ χρησιμοποιούμε κλάσεις όταν έχουμε πολλά διαφορετικά αντικείμενα που θέλουμε να τα μορφοποιήσουμε με τον ίδιο τρόπο. Έτσι το site μας μετά από όλες αυτές τις αλλαγές δείχνει έτσι: 68

69 Εικόνα 38 Σχεδιασμός πάνω μέρος site Εικόνα 39Το site με την προσθήκη εικόνων Εικόνα 40 Το WHO WE ARE κομμάτι του site 69

70 Εικόνα 41 To GET ΙNVOLVED τμήμα του site 6 Συμπεράσματα Οι κινητές συσκευές συνεχίζουν να αυξάνονται σε δημοτικότητα κάθε χρόνο. Η Cisco προβλέπει ότι η παγκόσμια διακίνηση δεδομένων κινητής τηλεφωνίας θα αυξηθεί σχεδόν 11 φορές μεταξύ 2013 και Η ανάγκη να έχουμε ένα διαδραστικό δικτυακό τόπο γίνεται ολοένα και πιο σημαντική. Είναι γενικά παραδεκτό οτι τα πλεονεκτήματα της ΗTML5 ως προς το HTML4 διευκολύνουν πολύ τόσο την προώθηση ιστοσελίδων όσο και την κατασκευή ιστοσελίδων. Πλέον επιβάλλεται σε κάθε κατασκευαστή ιστοσελίδων να γνωρίζει καλά τη γλώσσα και να κάνει σωστή προώθηση του site και προώθηση στο Google. Η HTML5 προσφέρει πολύ περισσότερες δυνατότητες στις ιστοσελίδες, για παράδειγμα πιο πολλές επιλογές στην κατασκευή φορμών, όπως πεδία για , τηλέφωνα κλπ. Ακόμη, υποστηρίζεται η άμεση ενσωμάτωση βίντεο ή ήχου σε ιστοσελίδες, χωρίς την ανάγκη πρόσθετων. Επιτρέπει σε αυτούς που διαχειρίζονται ιστοσελίδες, να μπορούν να προσθέσουν περισσότερη λειτουργικότητα στην ιστοσελίδα τους, όταν μάλιστα συνδυάσουν και την επίσης καινούρια έκδοση του CSS, το CSS3. Πιο συγκεκριμένα: Offline storage: H html5 σου δίνει την δυνατότητα να χειρίζεσαι 70

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 κανόνες στυλ

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

Σπουδές 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

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

Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8

Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8 Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8 Περιεχόμενα Κατέβασμα και εγκατάσταση Netbeans 8 Δημιουργία project εφαρμογής HTML(5)/CSS/Javascript

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

ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ. 2 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» Μέρος 1 ο HTML CSS Bootstrap v3.

ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ. 2 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» Μέρος 1 ο HTML CSS Bootstrap v3. ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 2 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» Μέρος 1 ο HTML CSS Bootstrap v3 Σταύρος Καουκάκης 1 Λίγα Λόγια για το Σχολείο Το 2 ο από συνολικά τρία σχολεία κώδικα

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

ΠΕΡΙΓΡΑΦΗ KAI ΣΥΝΤΟΜΟΣ ΟΔΗΓΟΣ ΤΟΥ ΛΟΓΙΣΜΙΚΟΥ HOT POTATOES

ΠΕΡΙΓΡΑΦΗ KAI ΣΥΝΤΟΜΟΣ ΟΔΗΓΟΣ ΤΟΥ ΛΟΓΙΣΜΙΚΟΥ HOT POTATOES Ο οδηγός για το πρόγραμμα Hot Potatoes έχει παρθεί από την ιστοσελίδα http://users.thess.sch.gr/salnk/didaskalia/hotpotatoes.htm. Τα παραδείγματα με τη χρήση του προγράμματος έχουν αναπτυχθεί από το Σύμβουλο

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

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

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

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

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

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

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

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

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

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

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

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο Το περιβάλλον εργασίας Ανοίγοντας την Ελληνική Έκδοση του FrontPage, για πρώτη φορά, η εικόνα που θα συναντήσουμε είναι αυτή της Εικόνας 1 με τα Μενού Εντολών και τη Γραμμή Εργαλείων, στο πάνω μέρος της

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

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

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

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

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

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

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

Βασικές Έννοιες Web Εφαρμογών

Βασικές Έννοιες Web Εφαρμογών ΟΙΚΟΝΟΜΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ ΤΜΗΜΑ ΔΙΟΙΚΗΤΙΚΗΣ ΕΠΙΣΤΗΜΗΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ Τεχνολογίες και Εφαρμογές Διαδικτύου Βασικές Έννοιες Web Εφαρμογών Κατερίνα Πραματάρη Τεχνολογίες και Εφαρμογές Διαδικτύου Περιεχόμενα

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

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

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

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

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής Εργαλεία και τεχνικές από την πλευρά του πελάτη Java Applet

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

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

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

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

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag); Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και

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

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

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

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

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

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

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

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής 4 φάσεις διαδικτυακών εφαρμογών 1.Εφαρμογές στατικής πληροφόρησης

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

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 Μάθαµε στο προηγούµενο µάθηµα πώς να δίνουµε ονόµατα στις ιστοσελίδες µας, να βάζουµε χρώµα και γραφικά, ή ακόµα να δηµιουργούµε υπερσυνδέσµους σε κείµενο και εικόνες. Σήµερα µεταξύ

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

Γαβαλάς αµιανός

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

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

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

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

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

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

1 ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΑΣ ΓΕΩΠΟΝΙΑΣ - ΤΜΗΜΑ ΦΥΤΙΚΗΣ ΠΑΡΑΓΩΓΗΣ 1 2 Περιεχόμενα 1. Εισαγωγή... 5 2. Επεξήγηση των εργαλείων που χρησιμοποιήθηκαν για την δημιουργία της ιστοσελίδας... 6 2.1 Γλώσσα προγραμματισμού ΗΤML για την δημιουργία της Ιστοσελίδας... 6 2.2 Γλώσσα

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

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

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

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

WORDPRESS. Εικόνα 1. Πατώντας στη «Σύνδεση» γράψτε το Username (όνομα χρήστη) και το Password (συνθηματικό) (εικόνα 2) που σας έδωσε ο διαχειριστής

WORDPRESS. Εικόνα 1. Πατώντας στη «Σύνδεση» γράψτε το Username (όνομα χρήστη) και το Password (συνθηματικό) (εικόνα 2) που σας έδωσε ο διαχειριστής WORDPRESS Το παρόν εγχειρίδιο είναι μία προσπάθεια για τους συναδέλφους εκπαιδευτικούς αλλά και μαθητές για την δημοσίευση άρθρων. Για παραλήψεις, λάθη ή κάτι το δυσνόητο παρακαλώ ενημερώστε με ώστε να

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

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

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

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

ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ.

ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ. ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ. Οδηγός Διαχειριστή Το m-learning Toolkit είναι μια ολοκληρωμένη πλατφόρμα εξ αποστάσεως εκπαίδευσης που έχει σχεδιαστεί για να υπάρχει η δυνατότητα της πρόσβασης

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

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

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

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

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

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

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

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

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

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

1. O FrontPage Explorer

1. O FrontPage Explorer 1. O FrontPage Explorer Στο παρελθόν, ο δηµιουργός µιας θέσης Ιστού έπρεπε να παρακολουθεί µόνος του τον τρόπο σύνδεσης των σελίδων του. Με το FrontPage Explorer µπορείτε να δηµιουργείτε ιστούς και να

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

ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΜΕ ΧΡΗΣΗ PHP

ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΜΕ ΧΡΗΣΗ PHP Αντώνης Χρυσόπουλος Κατερίνα Κυπριώτη Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΜΕ ΧΡΗΣΗ PHP Για να γίνουμε όλοι καλύτεροι άνθρωποι Τι έχει το μενού σήμερα??? 1. Τι είναι η PHP??? Τι είναι

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

Περιεχόμενα. Δημιουργία σύνδεσης... 27 5. ΤΙ ΕΙΝΑΙ ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ ΤΙ ΤΟΠΟΘΕΣΙΕΣ ΙΣΤΟΥ... 37. Γνωριμία με μια ιστοσελίδα:... 38

Περιεχόμενα. Δημιουργία σύνδεσης... 27 5. ΤΙ ΕΙΝΑΙ ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ ΤΙ ΤΟΠΟΘΕΣΙΕΣ ΙΣΤΟΥ... 37. Γνωριμία με μια ιστοσελίδα:... 38 Περιεχόμενα ΠΡΟΛΟΓΟΣ... 11 ΔΙΑΔΙΚΤΥΟ... 13 1. ΙΣΤΟΡΙΑ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ... 15 2. ΤΙ ΕΙΝΑΙ ΤΟ ΔΙΑΔΙΚΤΥΟ INTERNET;... 16 3. ΤΙ ΠΡΟΣΦΕΡΕΙ ΤΟ ΔΙΑΔΙΚΤΥΟ, ΤΙ ΜΠΟΡΕΙ ΝΑ ΒΡΕΙ ΚΑΝΕΙΣ... 19 4. ΤΙ ΑΠΑΙΤΕΙΤΑΙ ΓΙΑ ΝΑ

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

Άσκηση 5 Firefox Αποθήκευση αρχείων

Άσκηση 5 Firefox Αποθήκευση αρχείων Άσκηση 5 Firefox Αποθήκευση αρχείων Παρουσίαση Γραμμών Εργαλείων Ανοίγουμε τον περιηγητή ιστού Firefox. Αποθήκευση εικόνων Ανοίγουμε την σελίδα www.google.gr Στην πάνω αριστερά γωνία κάνουμε αριστερό κλικ

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

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Microsoft Excel Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Microsoft Excel Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Κεφάλαιο 1: Microsoft Excel 2002... 9 Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26 Κεφάλαιο 3: Δημιουργία νέου βιβλίου εργασίας και καταχώριση δεδομένων...

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

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

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

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

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

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

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

6 Εισαγωγή στο Wordpress 3.x

6 Εισαγωγή στο Wordpress 3.x Περιεχόμενα 1 Εγκατάσταση του WordPress... 11 Ελάχιστες απαιτήσεις... 11 Easy PHP... 12 Εγκατάσταση Easy PHP... 12 Βήματα εγκατάστασης EasyPHP με εικόνες... 13 Το EasyPHP στα Ελληνικά... 17 Κατέβασμα και

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

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

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

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

Εισαγωγή στην Επιστήμη της Πληροφορικής Εργαστήριο. Microsoft Word Μέρος 1

Εισαγωγή στην Επιστήμη της Πληροφορικής Εργαστήριο. Microsoft Word Μέρος 1 Πανεπιστήμιο Κύπρου Τμήμα Πληροφορικής Εισαγωγή στην Επιστήμη της Πληροφορικής και Πληροφοριακά Συστήματα Εργαστήριο - ΕΠΛ003 Εισαγωγή στην Επιστήμη της Πληροφορικής Εργαστήριο Microsoft Word Μέρος 1 Παναγιώτης

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

ΚΕΦΑΛΑΙΟ 1. Εισαγωγή στην Python. 1.1 Εισαγωγή

ΚΕΦΑΛΑΙΟ 1. Εισαγωγή στην Python. 1.1 Εισαγωγή ΚΕΦΑΛΑΙΟ 1 Εισαγωγή στην Python Σύνοψη Σε αυτό το κεφάλαιο κάνουμε μια σύντομη εισαγωγή στην Python και στα εργαλεία λογισμικού που θα χρησιμοποιήσουμε στη συνέχεια του συγγράμματος. Προαπαιτούμενη γνώση

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

Περιεχόμενα. Τεχνικό εγχειρίδιο χρήσης IBNEWSLETTER

Περιεχόμενα. Τεχνικό εγχειρίδιο χρήσης IBNEWSLETTER Περιεχόμενα ΣΤΟΙΧΕΙΑ ΕΠΙΚΟΙΝΩΝΙΑΣ... 2 Τμήμα Υποστήριξης (Help Desk and Client Support)... 2 ΕΙΣΑΓΩΓΗ... 3 Εισαγωγή Email marketing... 3 Σχετικά με το IBNEWSLETTER... 3 Μεθοδολογία... 4 Χαρακτηριστικά...

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

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

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

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

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 Dreamweaver 1/7 Εισαγωγή Το Dreamweaver είναι ένας HTML editor που αναπτύχθηκε από την Macromedia. Είναι WYSIWYG (What You See Is What You Get),

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

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML Δικτυακά Πολυμέσα ΙΙ Διάλεξη #2 η : Βασικές έννοιες σχεδιασμού στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Τρέχον status της HTML Μετάβαση από την HTML στην XHTML Κλέ Καλές πρακτικές συγγραφής

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

ΔΙΑΔΙΚΑΣΙA ΜΕΤΑΦΟΡΑΣ ΥΛΙΚΟΥ ΜΑΘΗΜΑΤΟΣ ΑΠΟ BLACKBOARD VISTA ΣΕ MOODLE

ΔΙΑΔΙΚΑΣΙA ΜΕΤΑΦΟΡΑΣ ΥΛΙΚΟΥ ΜΑΘΗΜΑΤΟΣ ΑΠΟ BLACKBOARD VISTA ΣΕ MOODLE ΔΙΑΔΙΚΑΣΙA ΜΕΤΑΦΟΡΑΣ ΥΛΙΚΟΥ ΜΑΘΗΜΑΤΟΣ ΑΠΟ BLACKBOARD VISTA ΣΕ MOODLE Η διαδικασία μεταφοράς του υλικού ενός μαθήματος από την πλατφόρμα Blackboard Vista στην πλατφόρμα Moodle σε βήματα είναι η ακόλουθη:

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

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

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

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

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

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

Μπορείτε τα δείτε βιντεάκι με τη διαδικασία εδώ: http://www.greektuts.net/greek-in-joomla/

Μπορείτε τα δείτε βιντεάκι με τη διαδικασία εδώ: http://www.greektuts.net/greek-in-joomla/ 1) Εμφάνιση ιστοσελίδας Ανοίγουμε το πρόγραμμα πλοήγησης (Firefox, Chrome, Internet Explorer κτλ) και στη γραμμή διευθύνσεων πληκτρολογούμε τη διεύθυνση http://localhost ή http://127.0.0.1. Αν δεν βλέπουμε

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

Πρόγραμμα Ενδοσχολικής Επιμόρφωσης

Πρόγραμμα Ενδοσχολικής Επιμόρφωσης Πρόγραμμα Ενδοσχολικής Επιμόρφωσης 17 ου Δημοτικού Σχολείου Ρόδου Διαχείριση και Ενημέρωση Σχολικού Ιστότοπου Α Κύκλος Φθινόπωρο 2011 2 Οδηγός για την εισαγωγή άρθρων και πληροφοριών στον ιστότοπο του

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

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου.

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1> ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά

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

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

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

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

Σημειώσεις για τις Ιστοσελίδες του Google

Σημειώσεις για τις Ιστοσελίδες του Google Σημειώσεις για τις Ιστοσελίδες του Google 1 Βήμα 1 ο Μπαίνουμε στην σελίδα της Google για τις ιστοσελίδες (http://sites.google.com). 2 Εναλλακτικά, μπαίνουμε στο http://www.google.com, επιλέγουμε περισσότερα

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

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

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

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

Σύγκριση FLASH και HTML 5 HTML 5 σχετικά με την υποστήριξη πολυμέσων

Σύγκριση FLASH και HTML 5 HTML 5 σχετικά με την υποστήριξη πολυμέσων ΓΤΠ61 καθηγητής-σύμβουλος Δημήτριος Ζευγώλης Εργασία του Κ. Μακρόπουλου Σύγκριση FLASH και HTML 5 HTML 5 σχετικά με την υποστήριξη πολυμέσων 1 Εισαγωγή Το έτος 2009 υπολογίζεται ότι περισσότεροι από 1,5

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

ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com /

ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com / ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com / 1. Τι είναι το wikidot Το wikidot είναι ένας δικτυακός τόπος στον οποίο κάθε χρήστης έχει το δικαίωμα να δημιουργήσει

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

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

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

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

Φορολογική Βιβλιοθήκη. Θανάσης Φώτης Προγραμματιστής Εφαρμογών

Φορολογική Βιβλιοθήκη. Θανάσης Φώτης Προγραμματιστής Εφαρμογών Φορολογική Βιβλιοθήκη Θανάσης Φώτης Προγραμματιστής Εφαρμογών Το έργο Η φορολογική βιβλιοθήκη πρόκειται για ένα έργο που φιλοδοξεί να αποτελέσει σημαντικό βοήθημα για τον επαγγελματία λογιστή και όχι μόνο.

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

Αφού δώσουμε όνομα χρήση και password μπορούμε να επιλέξουμε ημερομηνία εισόδου στο σύστημα, εταιρία και υποκατάστημα

Αφού δώσουμε όνομα χρήση και password μπορούμε να επιλέξουμε ημερομηνία εισόδου στο σύστημα, εταιρία και υποκατάστημα Αφού δώσουμε όνομα χρήση και password μπορούμε να επιλέξουμε ημερομηνία εισόδου στο σύστημα, εταιρία και υποκατάστημα Η κεντρική οθόνη του προγράμματος. Ανά χρήστη υπάρχει δυνατότητα σχεδιασμού Menu Αρχείο

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

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

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

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

5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ

5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ 5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ 5.1 Εισαγωγή Το πρακτικό κομμάτι της πτυχιακής μας εργασίας αφορά την δημιουργία μιας λειτουργικής ιστοσελίδας με την χρήση της πλατφόρμας του Weebly, που αποτελεί μια σύγχρονη

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

ΟΔΗΓΙΕΣ ΓΙΑ ΤΟ ΠΑΙΧΝΙΔΙ.

ΟΔΗΓΙΕΣ ΓΙΑ ΤΟ ΠΑΙΧΝΙΔΙ. ΟΔΗΓΙΕΣ ΓΙΑ ΤΟ ΠΑΙΧΝΙΔΙ. Το πρώτο πράγμα που βλέπουμε μόλις ξεκινάμε το παιχνίδι είναι μια λίστα με όλα τα διαθέσιμα βίντεο με τα οποία μπορούμε να εξασκηθούμε. Σε αυτή περιλαμβάνονται επίσης πληροφορίες

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

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

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

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

Π Τ Υ Χ Ι Α Κ Η Ε Ρ Γ Α Σ Ι Α

Π Τ Υ Χ Ι Α Κ Η Ε Ρ Γ Α Σ Ι Α ΑΝΩΤΑΤΟ ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙ ΕΥΤΙΚΟ Ι ΡΥΜΑ ΠΕΙΡΑΙΑ ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΙΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΤΟΜΕΑΣ ΑΡΧΙΤΕΚΤΟΝΙΚΗΣ Η/Υ, ΠΛΗΡΟΦΟΡΙΚΗΣ & ΙΚΤΥΩΝ Εργ. Τεχνολογίας Λογισμικού & Υπηρεσιών S 2 ELab Π Τ Υ Χ Ι Α

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

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο.

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο. Εργαστήριο #12 Από τα προηγούμενα εργαστήρια: Το εργαστήριο αυτό είναι ανεξάρτητο από τα προηγούμενα επειδή όμως ασχολείται με τη γλώσσα JavaScript, βεβαιωθείτε ότι έχετε διαβάσει το εισαγωγικό Παράρτημα

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

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

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

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

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

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

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

Εισαγωγή στις αρχές του CMS. Joomla Training. Wordpress Training.

Εισαγωγή στις αρχές του CMS. Joomla Training. Wordpress Training. Εισαγωγή στις αρχές του CMS. Joomla Training. Wordpress Training. Τι είναι το CMS? Η ιστορία των CMSs Δυνατότητες των CMS Είναι τα CMSs οι σωστές λύσεις; Server-side λογισμικό που εξειδικεύεται στην απλοποιήσει,

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

Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος

Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος Δημιουργία Web Site Λογισμικό Ανάπτυξης Dreamweaver MX (Oρισμός του Site(Τα αρχεία του Site να είναι τοποθετημένα σε μια θέση την οποία

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

Στοιχεία ορισμού θέσης (Positioning Elements)

Στοιχεία ορισμού θέσης (Positioning Elements) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS

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

Διαδικτυακές Υπηρεσίες Αναζήτησης, Απεικόνισης και Απευθείας Πρόσβασης στα δεδομένα ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ. Έκδοση 0.1.

Διαδικτυακές Υπηρεσίες Αναζήτησης, Απεικόνισης και Απευθείας Πρόσβασης στα δεδομένα ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ. Έκδοση 0.1. Κομβικό Σημείο Επαφής Υπουργείου Εσωτερικών Διαδικτυακές Υπηρεσίες Αναζήτησης, Απεικόνισης και Απευθείας Πρόσβασης στα δεδομένα ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ Έκδοση 0.1. Νοέμβρης 2014 Περιεχόμενα 1. ΕΙΣΑΓΩΓΗ... 2 2.

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

XAMPP Apache MySQL PHP javascript xampp

XAMPP Apache MySQL PHP javascript xampp XAMPP Το xampp είναι ένα δωρεάν πρόγραμμα με το οποίο μπορούμε να κάνουμε εγκατάσταση τον Apache, τη MySQL και την PHP. Apache. Ο Apache είναι ένας Web Server. Είναι δηλαδή πρόγραμμα το οποίο τρέχει μόνιμα

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

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς Εργασία-3: Παρουσίαση Εργασίας Ομάδα Α. Προετοιμασία Αναφοράς Αρκετοί πιστεύουν πως η επιτυχία μιας παρουσίασης είναι δεδομένη εάν ο παρουσιαστής κατέχει το θέμα που πρόκειται να παρουσιάσει και είναι

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

Πλοήγηση www / Με τον Internet Explorer

Πλοήγηση www / Με τον Internet Explorer Πλοήγηση www / Με τον Internet Explorer Περιεχόμενα 1.Eισαγωγή 2.Το περιβάλλον του Internet Explorer 3.Οδηγίες πλοήγησης 4.Αποθήκευση αρχείων 5.Αγαπημένα 6.Ασφαλής σύνδεση 7.Διακομιστής μεσολάβησης 1.Εισαγωγή

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

Ανάπτυξη Υπηρεσίας Καταλόγου LDAP με τα στοιχεία του προσωπικού του TEI Πειραιά. Νίκος Πασσαράς. Εισηγητής: Πρεζεράκος Γεώργιος

Ανάπτυξη Υπηρεσίας Καταλόγου LDAP με τα στοιχεία του προσωπικού του TEI Πειραιά. Νίκος Πασσαράς. Εισηγητής: Πρεζεράκος Γεώργιος ΑΝΩΤΑΤΟ ΤΕΧΝΟΛΟΓΙΚΟ ΙΔΡΥΜΑ ΠΕΙΡΑΙΑ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΙΚΩΝ ΣΥΣΤΗΜΑΤΩΝ Ανάπτυξη Υπηρεσίας Καταλόγου LDAP με τα στοιχεία του προσωπικού του TEI Πειραιά Νίκος Πασσαράς

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

Η HTML 5 θα αλλάξει το Web?

Η HTML 5 θα αλλάξει το Web? Η HTML 5 θα αλλάξει το Web? (ή αλλιώς, έρχεται το τέλος των plugins?) Αλέξανδρος Καράκος Εργαστήριο Προγραµµατισµού και Επεξεργασίας Πληροφοριών Internet 2... Είναι ένα ξεχωριστό µέσο δηµοσίευσης πληροφοριών

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

Όταν αποθηκεύετε μία παρουσίαση, την ονομάζετε και καθορίζετε πού θα την αποθηκεύσετε

Όταν αποθηκεύετε μία παρουσίαση, την ονομάζετε και καθορίζετε πού θα την αποθηκεύσετε Αποθήκευση μίας παρουσίασης σε μία τοποθεσία σε έναν οδηγό Όταν εργάζεστε με το, η φόρμα εργασίας καταχωρείται στη μνήμη RAM. Πρόκειται για μία προσωρινή μνήμη που χρησιμοποιείται για τις τρέχουσες δραστηριότητες

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

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

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

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

Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες

Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες Εισαγωγή-Σκοπός. Τρόποι δημιουργίας δυναμικών ιστοσελίδων. Dynamic Web Pages. Dynamic Web Page Development Using Dreamweaver. Τρόποι δημιουργίας δυναμικών

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

ΟΔΗΓΟΣ ΧΡΗΣΗΣ WEBMAIL ΤΕΙ ΚΑΛΑΜΑΤΑΣ

ΟΔΗΓΟΣ ΧΡΗΣΗΣ WEBMAIL ΤΕΙ ΚΑΛΑΜΑΤΑΣ ΟΔΗΓΟΣ ΧΡΗΣΗΣ WEBMAIL ΤΕΙ ΚΑΛΑΜΑΤΑΣ ΠΕΡΙΕΧΟΜΕΝΑ 1. URL Διεύθυνση WebMail... 3 2. Εγκατάσταση Πιστοποιητικού Ασφάλειας... 3 2.1 Εγκατάσταση Πιστοποιητικού στον Internet Explorer... 3 2.2 Εγκατάσταση Πιστοποιητικού

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

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

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

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

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

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

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

Vodafone Business Connect

Vodafone Business Connect Vodafone Business Connect Vodafone Business WebHosting Αναλυτικός Οδηγός Χρήσης Photo Album Αναλυτικός οδηγός χρήσης: Photo Album Vodafone Business Connect - Υπηρεσίες φιλοξενίας εταιρικού e-mail & web

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

Το διαδίκτυο είναι ένα δίκτυο που αποτελείτε από πολλά μικρότερα δίκτυα υπολογιστών.

Το διαδίκτυο είναι ένα δίκτυο που αποτελείτε από πολλά μικρότερα δίκτυα υπολογιστών. Κεφάλαιο 2 Με το διαδίκτυο μπορεί κάποιος: να κάνει έρευνα, να ψωνίσει για διάφορες υπηρεσίες και προϊόντα, να δει καιρικούς χάρτες, να πάρει φωτογραφίες, ταινίες, και διάφορες άλλες πληροφορίες που βρίσκονται

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

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013 ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013 1. Δίκτυα Υπολογιστών και Διαδίκτυο... 3 1.1. Όροι Και Έννοιες... 3 1.2. Ασφάλεια Στο Διαδίκτυο... 5 2. Περιήγηση στον Παγκόσμιο Ιστό 7 Το Περιβάλλον Ενός Φυλλομετρητή...

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

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet.

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΩΡΕΣ ΔΙΔΑΣΚΑΛΙΑΣ: ΕΙΔΟΣ ΜΑΘΗΜΑΤΟΣ: Μικτό Γενικός σκοπός είναι να αποκτήσει ο καταρτιζόμενος τις αναγκαίες γνώσεις σχετικά με εργαλεία και τις τεχνικές για

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

hel-col@otenet.gr Κωνσταντίνος Παρασκευόπουλος Καθηγητής Πληροφορικής (ΠΕ19 MSc) Ελληνικό Κολλέγιο Θεσσαλονίκης kparask@hellenic-college.

hel-col@otenet.gr Κωνσταντίνος Παρασκευόπουλος Καθηγητής Πληροφορικής (ΠΕ19 MSc) Ελληνικό Κολλέγιο Θεσσαλονίκης kparask@hellenic-college. Χρήση της Διεπαφής Προγραμματισμού Εφαρμογής Google Maps για τη δημιουργία διαδραστικού χάρτη με τα Μνημεία Παγκόσμιας Πολιτιστικής Κληρονομιάς της ΟΥΝΕΣΚΟ στη Θεσσαλονίκη Εμμανουήλ Τσάμης 1, Κωνσταντίνος

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

Άνοιγμα (και κλείσιμο) της εφαρμογής Εγγράφου Κειμένου

Άνοιγμα (και κλείσιμο) της εφαρμογής Εγγράφου Κειμένου 3.1.1.1 Άνοιγμα (και κλείσιμο) της εφαρμογής Εγγράφου Κειμένου Ως επί το πλείστον δεν υπάρχουν διαφορές στη χρήση του Εγγράφου Κειμένου στα λειτουργικά Windows ή Linux. Η σημαντικότερη διαφορά παρουσιάζεται

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

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000. PIRCH 32 v0.92b

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000. PIRCH 32 v0.92b PIRCH 32 v0.92b A.S. DRIGAS Applied Technologies Department NCSR DEMOKRITOS Ag. Paraskevi GREECE dr@imm.demokritos.gr http://imm.demokritos.gr Το Pirch 32 είναι ένα από τα καλύτερα προγράµµατα επικοινωνίας

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

Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word

Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word Επειδή οι μεταγενέστερες εκδόσεις του Word δεν περιλαμβάνουν στο μενού τη δυνατότητα δημιουργίας πολλαπλών

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

Βρίσκοντας το block εισόδου χρήστη στο τέλος της αριστερής στήλης του site:

Βρίσκοντας το block εισόδου χρήστη στο τέλος της αριστερής στήλης του site: User Manual TEI Είσοδος στο Διαχειριστικό (Admin - Back office Panel) Για την είσοδο στο διαχειριστικό έχουν προβλεφθεί διάφοροι τρόποι οι οποίοι φαίνονται παρακάτω: Είσοδος μέσω των link που εμφανίζονται

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

ΣΧΕΔΙΑΣΜΟΣ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΤΗ ΧΡΗΣΗ ΠΡΟΤΥΠΟΥ ΙΣΤΟΣΕΛΙΔΑΣ (TEMPLATE) ΣΤΟ ΠΡΟΓΡΑΜΜΑ MICROSOFT OFFICE SHAREPOINT DESIGNER 2007

ΣΧΕΔΙΑΣΜΟΣ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΤΗ ΧΡΗΣΗ ΠΡΟΤΥΠΟΥ ΙΣΤΟΣΕΛΙΔΑΣ (TEMPLATE) ΣΤΟ ΠΡΟΓΡΑΜΜΑ MICROSOFT OFFICE SHAREPOINT DESIGNER 2007 ΣΧΕΔΙΑΣΜΟΣ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΤΗ ΧΡΗΣΗ ΠΡΟΤΥΠΟΥ ΙΣΤΟΣΕΛΙΔΑΣ (TEMPLATE) ΣΤΟ ΠΡΟΓΡΑΜΜΑ MICROSOFT OFFICE SHAREPOINT DESIGNER 2007 Ο σχεδιασμός ιστοσελίδας με τη χρήση του προγράμματος Microsoft Office SharePoint

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

Η βασική εργαλειοθήκη του διαδικτύου

Η βασική εργαλειοθήκη του διαδικτύου Η βασική εργαλειοθήκη του διαδικτύου Ματθαίος Πατρινόπουλος 1 2 HTML Hyper Text Markup Language Σήμερα στην έκδοση 5 --> HTML5 Δεν είναι γλώσσα προγραμματισμού αλλά γλώσσα που καθορίζει η δομή και τις

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