ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και.

Transcript ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και.

Slide 1

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 27

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 28

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 29

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 30

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 31

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 32

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 33

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 34

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 35

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 36

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 37

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 38

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 39

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 40

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 41

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 42

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 43

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 44

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 45

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 46

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 47

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 48

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 49

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 50

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 51

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 52

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 53

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 54

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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 55

ΣΥΓΓΡΑΦΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ
ΧΡΗΣΗ ΤΗΣ 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)


Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό
τους



Απουσία περιεχομένου

, , , <body>      <html>: Περιέχει ολόκληρη τη σελίδα <head>: Περιέχει meta-πληροφορίες για τη σελίδα <title>: Περιέχει τον τίτλο της σελίδας <body>: Περιέχει το περιεχόμενο της σελίδας Το <html> πρέπει υποχρεωτικά να περιέχει μόνο <head> και <body>, με αυτή τη σειρά. Το <title> πρέπει να περιέχεται στο <head> Βασική δομής σελίδας - DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>My First Page

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)

Συγχαρητήρια!!!

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 © 2024, Inc. All rights reserved.

Directory

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η

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

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



Η