χρησιμοποιείται 1 φορά.



Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.



Δεν υπάρχει h7





Επικεφαλίδες (headlines)

Λίστες (lists)



Αριθμημένες: Σειρά έχει σημασία, χρήση

Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση

(μνημονικά: ordered list, unordered list)




• : ένα στοιχείο μιας λίστας (μνημονικό: list item)
  
  
  
  Το
• μπορεί να περιέχεται μόνο σε
  ή
  
  
  
  
  Τα
  και
  μπορούν να περιέχουν μόνο
  • 
    
    
    
    
    Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια
    
    Εμφώλευση
    
    
    
    Η απλότητα και η δύναμη της HTML!
    Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.
    
    

    Λόγοι που έρχομαι στο σεμινάριο

    
    
    
    
    1. Για να εντυπωσιάσω:
       
       
       
       • Τη γάτα μου
       
       
       • Το σκύλο μου
       
       
       • Την Αννούλα
       
       
       
       
    2. Για να μάθω
    
    
    3. Για να γίνω διάσημος
    
    
    
    
    Λόγοι που έρχομαι στο σεμινάριο
    1. Για να εντυπωσιάσω:
    • Τη γάτα μου
    • Το σκύλο μου
    • Την Αννούλα
    2. Για να μάθω
    3. Για να γίνω διάσημος
    
    Ιδιότητες Ετικετών
    
    
    Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα
    
    
    
    Κάθε ιδιότητα έχει όνομα και τιμή
    
    
    
    Όνομα από τιμή χωρίζονται με =
    
    
    
    Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)
    
    
    
    Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας
    και από τις άλλες ετικέτες
    
    Ιδιότητες Ετικετών
    
    Σύνδεσμοι (links)
    
    
    
    Ορίζει έναν σύνδεσμο (μνημονικό: anchor)
    href: ορίζει τον προορισμό του συνδέσμου
    
    Μάθε HTML!
    
    Μάθε HTML!
    
    Είκονες (images)
    
    
    
    : Περιγράφει μια εικόνα
    src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)
    alt: περιγραφή της εικόνας (υποχρεωτικό)
    width: μήκος της εικόνας σε pixels (προαιρετικό)
    height: μήκος της εικόνας σε pixels (προαιρετικό)
    
    
    
    Η ετικέτα δεν περιλαμβάνει περιέχομενο
    
    
    
    
    
    
    Είκονες (images)
    
    Πίνακες (tables)
    
    
    
    
    
    
    Χρησιμοποιούνται μόνο για δεδομένα πίνακα
    Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε
    CSS και όχι HTML πίνακες!
    
    Παράδειγμα:
    Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία
    Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,
    τομέας, σπουδαιότερη ανακάλυψη.
    
    Πίνακας: Διάσημοι Επιστήμονες
    
    Γραμμή πίνακα
    
    Κελί πίνακα
    
    Πίνακες (tables)
    
    
    
    
    
    
    
    
    
    : Ορίζει έναν πίνακα
    : Ορίζει μια γραμμή πίνακα
    
    
    
    περιέχει μόνο
    περιέχει μόνο
    περιέχεται μόνο σε

    : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 2 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα ιπ Slide 34 Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 3 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα Πίνακες (tables) : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 4 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 5 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα ιπ Slide 33 Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 6 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα Πίνακες (tables) : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 7 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 8 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα ιπ Slide 32 Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 9 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα Πίνακες (tables) : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 10 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 11 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα ιπ Slide 31 Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 12 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα Πίνακες (tables) : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 13 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 14 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα ιπ Slide 30 Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 15 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα Πίνακες (tables) : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 16 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 17 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα ιπ Slide 29 Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 18 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα Πίνακες (tables) : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 19 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 20 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα ιπ Slide 28 Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 21 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα Πίνακες (tables) : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 22 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 23 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα ιπ Slide 27 Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 24 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα Πίνακες (tables) : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 25 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.  Δεν χρησιμοποιούμε και για μορφοποίηση!  Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο. Επικεφαλίδες (headlines)  : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου. … : Επικεφαλίδα 6ου επιπέδου.  Η χρησιμοποιείται 1 φορά.  Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.  Δεν υπάρχει h7    Επικεφαλίδες (headlines) Λίστες (lists)  Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list)  : ένα στοιχείο μιας λίστας (μνημονικό: list item)  Το μπορεί να περιέχεται μόνο σε ή  Τα και μπορούν να περιέχουν μόνο   Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια Εμφώλευση   Η απλότητα και η δύναμη της HTML! Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ. Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος Ιδιότητες Ετικετών  Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα  Κάθε ιδιότητα έχει όνομα και τιμή  Όνομα από τιμή χωρίζονται με =  Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)  Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες Ιδιότητες Ετικετών Σύνδεσμοι (links)   Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! Μάθε HTML! Είκονες (images)  : Περιγράφει μια εικόνα src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) alt: περιγραφή της εικόνας (υποχρεωτικό) width: μήκος της εικόνας σε pixels (προαιρετικό) height: μήκος της εικόνας σε pixels (προαιρετικό)  Η ετικέτα δεν περιλαμβάνει περιέχομενο     Είκονες (images) Πίνακες (tables)     Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη. Πίνακας: Διάσημοι Επιστήμονες Γραμμή πίνακα Κελί πίνακα Πίνακες (tables)        : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε : Ορίζει ένα κελί πίνακα Προσοχή: περιέχει μόνο περιέχει μόνο περιέχεται μόνο σε περιέχεται μόνο σε Πίνακες (tables) Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά eιπ + 1 = 0 Βιβλιογραφία - Αναζητήσεις  Patrick Griffiths, HTMLDog  http://htmldog.com  http://www.w3scholls.com/html  http://el.wikipedia.org/wiki/HTML  http://www.htmlcodetutorial.com/  http://validator.w3.org/ (validator HTML code) Συγχαρητήρια!!!  Slide 26 ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού Ιστορική Αναδρομή – Η Αρχή    Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ ARPANET: Advanced Research Projects Agency Network «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί» Δεκαετία ‘60: ένα ενδιαφέρον πείραμα      Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας Δεκαετία ‘70: οι πρώτες συνδέσεις  Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του  Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet  Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο  Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP)  Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail)  Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία). Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα       1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET 1983: Το ARPANET χωρίζεται σε δύο τμήματα:  MILNET (για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) 1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους  1990: Καταργείται πλέον το ARPANET  Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990  1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία  Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του  Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες  Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες HTML και CSS  HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο  CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση  Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή HTML CSS Περιεχόμενο Μορφοποίηση  Τίτλος  Χρώματα  Κείμενο  Θέση  Λίστα  Μέγεθος  Πίνακας  Στοίχιση  Εικόνα  Πλαίσια  Σύνδεσμος  Γραμμές  Φόντο Παράδειγμα: Βιβλίο Περιεχόμενο Μορφοποίηση  Τίτλος  Μέγεθος τίτλου  Συγγραφέας  Θέση ονόματος συγγραφέα  Επικεφαλίδες κεφαλαίων  Στοίχιση επικεφαλίδων  Κείμενο  Περιθώριο κειμένου  Χωρισμός κεφαλαίων  Κενές σελίδες ανάμεσα στα κεφάλαια  Χωρισμός παραγράφων  Υποσημειώσεις με πλάγια γράμματα  Υποσημειώσεις Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο  Ίδιο βιβλίο, διαφορετική έκδοση Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση  Διαφορετικό βιβλίο, ίδια έκδοση Παράδειγμα 3 Παράδειγμα 4 HTML  Γράφουμε σε αρχεία .html  Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.)  Περιέχει κώδικα σε μορφή XML  Γίνεται interpret κι όχι compile  Τρέχει μέσα στους browsers  Τρέχει και τοπικά  Η επέκταση πρέπει να είναι .html κι όχι .html.txt Ετικέτες (Tags)   Κάθε tag ξεκινάει με < και τελειώνει με > Υπάρχουν τριών ειδών tags:  Start tags:  End tags:  Empty-element tags:  Κάθε tag έχει ένα όνομα  Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας  Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO) Ετικέτες (Tags) Ετικέτες (Tags) Ετικέτες (Tags)  Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους  Απουσία περιεχομένου , , Hello World!  Δηλώνει την έκδοση της HTML  Κάνει τον browser να συμπεριφέρεται σωστά  Το κάνουμε copy/paste στην αρχή της σελίδας Παράγραφοι (paragraphs)    Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από ένα μόνο κενό : Ορίζει μια παράγραφο (μνημονικό: paragraph) Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος! Αλλαγή γραμμής (break) : Ορίζει μια αλλαγή γραμμής (μνημονικό: break)   Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS  Έμφαση   : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis) : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)  Συνηθίζεται το να μορφοποιείται με πλάγια και το με έντονα γράμματα.Δεν χρησιμοποιούμε και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines) : Επικεφαλίδα 1ου επιπέδου (headline) : Επικεφαλίδα 2ου επιπέδου.… : Επικεφαλίδα 6ου επιπέδου.Η χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση (μνημονικά: ordered list, unordered list) : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το μπορεί να περιέχεται μόνο σε ή Τα και μπορούν να περιέχουν μόνο Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables) Λόγοι που έρχομαι στο σεμινάριο Για να εντυπωσιάσω: Τη γάτα μου Το σκύλο μου Την Αννούλα Για να μάθω Για να γίνω διάσημος Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου Μάθε HTML! : Ορίζει έναν πίνακα : Ορίζει μια γραμμή πίνακα : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags: περιέχεται μόνο σε Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά e + 1 = 0 : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags: περιέχεται μόνο σε Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά e + 1 = 0 : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags: περιέχεται μόνο σε Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά e + 1 = 0 : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags: περιέχεται μόνο σε Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά e + 1 = 0 : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags: περιέχεται μόνο σε Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά e + 1 = 0 : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags: περιέχεται μόνο σε Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά e + 1 = 0 : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags: περιέχεται μόνο σε Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά e + 1 = 0 : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags: περιέχεται μόνο σε Alan Turing Επιστήμη Υπολογισμού Turing Machines Ludwig Wittgenstein Φιλοσοφία Tractatus Αρχιμίδης Μηχανικός Μοχλός Leonhard Euler Μαθηματικά e + 1 = 0

    : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:

    
    περιέχεται μόνο σε
    
    Πίνακες (tables)
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    Slide 35
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    : Ορίζει μια παράγραφο (μνημονικό: paragraph)

    
    

    Αυτή είναι η πρώτη μου σελίδα.

    
    

    Είμαι ενθουσιασμένος!

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
    : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
    
    
    
    
    να μορφοποιείται με πλάγια και το
    με έντονα γράμματα.Δεν χρησιμοποιούμε
    
    
    
    και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
    
    
    
    
    
    
    
    
    
    
    

    : Επικεφαλίδα 1ου επιπέδου (headline)

    
    

    : Επικεφαλίδα 2ου επιπέδου.…

    
    
    

    : Επικεφαλίδα 6ου επιπέδου.Η

    
    
    
    
    

    χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
    
    
    (μνημονικά: ordered list, unordered list)
    
    
    
    
    
    
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 36
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 37
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 38
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 39
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 40
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 41
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 42
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 43
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 44
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 45
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 46
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 47
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 48
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 49
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 50
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 51
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 52
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 53
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 54
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΧΡΗΣΗ ΤΗΣ HTMLΜπεκατώρος Μάριος - M1187Παναγιώτου Ευάγγελος - Μ1169Παπουτσής Βασίλειος - Μ1185Εθνικό και Καποδιστριακό Πανεπίστημιο ΑθηνώνΤμήμα Πληροφορικής και ΤηλεπικοινωνιώνΜάθημα: Σχεδίαση Εκπαιδευτικού ΛογισμικούΙστορική Αναδρομή – Η ΑρχήΤο σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε νααναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑARPANET: Advanced Research Projects Agency Network«Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (StanfordResearch Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στουςυπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στηνάλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένααντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις πουεμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, ηπρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχεγεννηθεί»Δεκαετία ‘60: ένα ενδιαφέρον πείραμαΣτα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τηδιασύνδεση απομακρυσμένων υπολογιστών μεταξύ τουςΤο δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματος ARPA τουΥπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούςερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη τηςαξιόπιστης λειτουργίας των δικτύωνΣτην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέατεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching)Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτατων δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνταιαπό κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμότους.Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνίαμεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσασυστήματα βρίσκονταν προσωρινά εκτός λειτουργίαςΔεκαετία ‘70: οι πρώτες συνδέσειςΤο 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται InternettingProject (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοίτρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα τουΓεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρειαργότερα το όνομά του το InternetΔιαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν νασυνδέονται και να αποτελούν ένα ΔιαδίκτυοΕπίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης τωνδεδομένων, το Transmission Control Protocol (TCP)Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) καιγια το ηλεκτρονικό ταχυδρομείο (E-mail)Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτατο University College of London (Αγγλία) και το Royal Radar Establishment(Νορβηγία).Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα1983: το πρωτόκολλο TCP/IP (συνδυασμός των TCP και IP) αναγνωρίζεται ωςπρότυπο από το Υπουργείο Άμυνας των ΗΠΑΕκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET1983: Το ARPANET χωρίζεται σε δύο τμήματα: MILNET (για στρατιωτικές επικοινωνίες) Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα)1985: Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγοροδίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου νασυνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπηεπιστημονική κοινότηταΤέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET(Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.)Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τασυνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστόσαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμοΔεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους1990: Καταργείται πλέον το ARPANETΌλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και ηΕλλάδα τo 19901993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στοhypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW) στοΕρευνητικό Κέντρο Φυσικής CERN στην ΕλβετίαΟ Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο γιατη μαζική παγκόσμια χρήση τουΗ δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιείπολλά πρωτόκολλα και υπηρεσίεςΤο Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνειδιάφορους τύπους στοιχείων, όπως κείμενο, φωτογραφίες, πολυμέσα καισυνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίεςHTML και CSSHTML (HyperText Markup Language):Περιγράφει το περιεχόμενοCSS (Cascading StyleSheets):Περιγράφει τη μορφοποίησηΠρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχήHTMLCSSΠεριεχόμενοΜορφοποίηση Τίτλος Χρώματα Κείμενο Θέση Λίστα Μέγεθος Πίνακας Στοίχιση Εικόνα Πλαίσια Σύνδεσμος Γραμμές ΦόντοΠαράδειγμα: ΒιβλίοΠεριεχόμενοΜορφοποίηση Τίτλος Μέγεθος τίτλου Συγγραφέας Θέση ονόματος συγγραφέα Επικεφαλίδες κεφαλαίων Στοίχιση επικεφαλίδων Κείμενο Περιθώριο κειμένου Χωρισμός κεφαλαίων Κενές σελίδες ανάμεσα στα κεφάλαια Χωρισμός παραγράφων Υποσημειώσεις με πλάγια γράμματα ΥποσημειώσειςΠαράδειγμα 1Μορφοποίηση αλλάζει, όχι περιεχόμενο Ίδιο βιβλίο, διαφορετική έκδοσηΠαράδειγμα 2Περιεχόμενο αλλάζει, όχι μορφοποίηση Διαφορετικό βιβλίο, ίδια έκδοσηΠαράδειγμα 3Παράδειγμα 4HTMLΓράφουμε σε αρχεία .htmlΤα επεξεργαζόμαστε με απλό κειμενογράφο(notepad, emacs, vim, κ.ο.κ.)Περιέχει κώδικα σε μορφή XMLΓίνεται interpret κι όχι compileΤρέχει μέσα στους browsersΤρέχει και τοπικάΗ επέκταση πρέπει να είναι .html κι όχι .html.txtΕτικέτες (Tags)Κάθε tag ξεκινάει με < και τελειώνει με >Υπάρχουν τριών ειδών tags: Start tags:  End tags:  Empty-element tags:
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Slide 55
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Κάθε tag έχει ένα όνομαΑνάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται τοπεριεχόμενο της ετικέταςΔενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες (Tags)Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτότουςΑπουσία περιεχομένου, , Hello World! Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδαςΠαράγραφοι (paragraphs)Η HTML αγνοεί τις αλλαγές γραμμών και τα κενάΠολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενόΑυτή είναι η πρώτη μου σελίδα.Είμαι ενθουσιασμένος!Αλλαγή γραμμής (break): Ορίζει μια αλλαγή γραμμής(μνημονικό: break)Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!Αυξομειώνουμε την κάθετη απόσταση με μορφοποίησημέσω CSSΈμφαση
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  : Ορίζει μια παράγραφο (μνημονικό: paragraph)

  
  

  Αυτή είναι η πρώτη μου σελίδα.

  
  

  Είμαι ενθουσιασμένος!

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)
  : Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου(strong emphasis)Συνηθίζεται το
  
  
  
  
  να μορφοποιείται με πλάγια και το
  με έντονα γράμματα.Δεν χρησιμοποιούμε
  
  
  
  και για μορφοποίηση!Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτεςαυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.Επικεφαλίδες (headlines)
  
  
  
  
  
  
  
  
  
  
  

  : Επικεφαλίδα 1ου επιπέδου (headline)

  
  

  : Επικεφαλίδα 2ου επιπέδου.…

  
  
  

  : Επικεφαλίδα 6ου επιπέδου.Η

  
  
  
  
  

  χρησιμοποιείται 1 φορά.Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.Δεν υπάρχει h7Επικεφαλίδες (headlines)Λίστες (lists)Αριθμημένες: Σειρά έχει σημασία, χρήση

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση
  
  
  (μνημονικά: ordered list, unordered list)
  
  
  
  
  
  
  • : ένα στοιχείο μιας λίστας (μνημονικό: list item)Το
  
  
  
  
  
  • μπορεί να περιέχεται μόνο σε
  ή
  Τα
  
  
  
  
  
  και
  μπορούν να περιέχουν μόνο
  • Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: ΨώνιαΕμφώλευσηΗ απλότητα και η δύναμη της HTML!Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.Λόγοι που έρχομαι στο σεμινάριο1. Για να εντυπωσιάσω:• Τη γάτα μου• Το σκύλο μου• Την Αννούλα2. Για να μάθω3. Για να γίνω διάσημοςΙδιότητες ΕτικετώνΕμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομαΚάθε ιδιότητα έχει όνομα και τιμήΌνομα από τιμή χωρίζονται με =Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέταςκαι από τις άλλες ετικέτεςΙδιότητες ΕτικετώνΣύνδεσμοι (links)Μάθε HTML!Είκονες (images): Περιγράφει μια εικόναsrc: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό)alt: περιγραφή της εικόνας (υποχρεωτικό)width: μήκος της εικόνας σε pixels (προαιρετικό)height: μήκος της εικόνας σε pixels (προαιρετικό)Η ετικέτα δεν περιλαμβάνει περιέχομενοΕίκονες (images)Πίνακες (tables)Χρησιμοποιούνται μόνο για δεδομένα πίνακαΓια τοποθέτηση στοιχείων σε ορισμένες θέσεις χρησιμοποιούμεCSS και όχι HTML πίνακες!Παράδειγμα:Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογίαΠίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο,τομέας, σπουδαιότερη ανακάλυψη.Πίνακας: Διάσημοι ΕπιστήμονεςΓραμμή πίνακαΚελί πίνακαΠίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Λόγοι που έρχομαι στο σεμινάριο

  
  
  
  
  • Για να εντυπωσιάσω:
  
  
  
  
  • Τη γάτα μου
  
  
  • Το σκύλο μου
  
  
  • Την Αννούλα
  
  
  
  • Για να μάθω
  
  
  • Για να γίνω διάσημος
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Ορίζει έναν σύνδεσμο (μνημονικό: anchor)href: ορίζει τον προορισμό του συνδέσμου
  
  
  Μάθε HTML!
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  : Ορίζει έναν πίνακα
  : Ορίζει μια γραμμή πίνακα
  : Ορίζει ένα κελί πίνακαΠροσοχή:Βιβλιογραφία - ΑναζητήσειςPatrick Griffiths, HTMLDoghttp://htmldog.comhttp://www.w3scholls.com/htmlhttp://el.wikipedia.org/wiki/HTMLhttp://www.htmlcodetutorial.com/http://validator.w3.org/ (validator HTML code)Συγχαρητήρια!!!
  
  
  περιέχει μόνο
  περιέχει μόνο
  περιέχεται μόνο σε
  περιέχεται μόνο σε
  
  Πίνακες (tables)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  AlanTuringΕπιστήμη ΥπολογισμούTuring MachinesLudwigWittgensteinΦιλοσοφίαTractatusΑρχιμίδηςΜηχανικόςΜοχλόςLeonhardEulerΜαθηματικάe + 1 = 0^ιπ
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Company

  • Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040
  • +357 64-733-402
  [email protected]

  Links

  About
  Contact
  Help / FAQ

  Legal

  Terms of Service
  Privacy policy
  Cookie policy
  Disclaimer

  ---

  slideum.com © 2025, Inc. All rights reserved.

  Directory

  ×