Συγγραφη ιστοσελιδασ με χρηση τησ HTML

1. Συγγραφη ιστοσελιδασ με χρηση τησ HTML Μπεκατώρος Μάριος - M1187 Παναγιώτου Ευάγγελος - Μ1169 Παπουτσής Βασίλειος - Μ1185 Εθνικό και Καποδιστριακό Πανεπίστημιο Αθηνών Τμήμα Πληροφορικής και Τηλεπικοινωνιών Μάθημα: Σχεδίαση Εκπαιδευτικού Λογισμικού

2. Ιστορική Αναδρομή

3. Ιστορική Αναδρομή – Η Αρχή • Το σημερινό Internet αποτελεί εξέλιξη του ARPANET, ενός δικτύου που άρχισε να αναπτύσσεται πειραματικά στα τέλη της δεκαετίας του 60 στις ΗΠΑ • ARPANET: Advanced Research Projects Agency Network • «Οκτώβριος 1969, ερευνητικό ινστιτούτο του πανεπιστημίου του Stanford (Stanford Research Institute – SRI): Σε ένα μικρό δωμάτιο μια ομάδα ειδικών στους υπολογιστές στέκεται γύρω από την οθόνη ενός υπολογιστή. Την ίδια στιγμή, στην άλλη άκρη της πολιτείας, στο Πανεπιστήμιο UCLA του Los Angeles, σε ένα αντίστοιχο δωμάτιο υπάρχει ένα παρόμοιο σκηνικό. Όταν οι λέξεις που εμφανίστηκαν στην οθόνη του Los Angeles ήταν οι ίδιες με εκείνες στο Stanford, η πρώτη συνομιλία μεταξύ δύο υπολογιστών είχε επιτευχθεί και το ARPAnet είχε γεννηθεί»

4. Δεκαετία ‘60: ένα ενδιαφέρον πείραμα • Στα πανεπιστήμια των ΗΠΑ οι ερευνητές ξεκινούν να πειραματίζονται με τη διασύνδεση απομακρυσμένων υπολογιστών μεταξύ τους • Το δίκτυο ARPANET γεννιέται το 1969 με πόρους του προγράμματοςARPA του Υπουργείου Άμυνας, με σκοπό να συνδέσει το Υπουργείο με στρατιωτικούς ερευνητικούς οργανισμούς και να αποτελέσει ένα πείραμα για τη μελέτη της αξιόπιστης λειτουργίας των δικτύων • Στην αρχική του μορφή, το πρόγραμμα απέβλεπε στον πειραματισμό με μια νέα τεχνολογία γνωστή σαν μεταγωγή πακέτων (packet switching) • Η τεχνική στα δίκτυα αυτής της υλοποίησης βασίζεται στον τεμαχισμό σε πακέτα των δεδομένων που πρόκειται να μεταφερθούν. Τα πακέτα αυτά δρομολογούνται από κόμβο σε κόμβο και συναρμολογούνται ξανά όταν φτάσουν στον προορισμό τους. • Στόχος ήταν η δημιουργία ενός Διαδικτύου που θα εξασφάλιζε την επικοινωνία μεταξύ απομακρυσμένων δικτύων, έστω και αν κάποια από τα ενδιάμεσα συστήματα βρίσκονταν προσωρινά εκτός λειτουργίας

5. Δεκαετία ‘70: οι πρώτες συνδέσεις • Το 1973, ξεκινά ένα νέο ερευνητικό πρόγραμμα που ονομάζεται Internetting Project (Πρόγραμμα Διαδικτύωσης) προκειμένου να ξεπεραστούν οι διαφορετικοί τρόποι που χρησιμοποιεί κάθε δίκτυο για να διακινεί τα δεδομένα του • Γεννιέται μια νέα τεχνική, το Internet Protocol (IP), από την οποία θα πάρει αργότερα το όνομά του το Internet • Διαφορετικά δίκτυα που χρησιμοποιούν το κοινό πρωτόκολλο IP μπορούν να συνδέονται και να αποτελούν ένα Διαδίκτυο • Επίσης, σχεδιάζεται μια άλλη τεχνική για τον έλεγχο της μετάδοσης των δεδομένων, το Transmission Control Protocol (TCP) • Ορίζονται προδιαγραφές για τη μεταφορά αρχείων μεταξύ υπολογιστών (FTP) και για το ηλεκτρονικό ταχυδρομείο (E-mail) • Σταδιακά συνδέονται με το ARPANET ιδρύματα από άλλες χώρες, με πρώτα το University College of London (Αγγλία) και το Royal Radar Establishment (Νορβηγία).

7. Δεκαετία ‘80: Για την ακαδημαϊκή κοινότητα • 1983: το πρωτόκολλο TCP/IP(συνδυασμός των TCP και IP) αναγνωρίζεται ως πρότυπο από το Υπουργείο Άμυνας των ΗΠΑ • Εκατοντάδες Πανεπιστήμια συνδέουν τους υπολογιστές τους στο ARPANET • 1983: Το ARPANETχωρίζεται σε δύο τμήματα:  MILNET(για στρατιωτικές επικοινωνίες)  Νέο ARPANET (για χρήση αποκλειστικά από την πανεπιστημιακή κοινότητα) • 1985:Το National Science Foundation (NSF) δημιουργεί ένα δικό του γρήγορο δίκτυο, το NSFNET χρησιμοποιώντας το πρωτόκολλο TCP/IP, προκειμένου να συνδέσει πέντε κέντρα υπερ-υπολογιστών μεταξύ τους και με την υπόλοιπη επιστημονική κοινότητα • Τέλη της δεκαετίας του ‘80, όλο και περισσότερες χώρες συνδέονται στο NSFNET (Καναδάς, Γαλλία, Σουηδία, Αυστραλία, Γερμανία, Ιταλία, κ.α.) • Χιλιάδες πανεπιστήμια και οργανισμοί δημιουργούν τα δικά τους δίκτυα και τα συνδέουν πάνω στο παγκόσμιο αυτό δίκτυο το οποίο αρχίζει να γίνεται γνωστό σαν INTERNET και να εξαπλώνεται με τρομερούς ρυθμούς σε ολόκληρο τον κόσμο

9. Δεκαετία ‘90: Ένα παγκόσμιο δίκυο για όλους • 1990: Καταργείται πλέοντο ARPANET • Όλο και περισσότερες χώρες συνδέονται στο NSFNET, μεταξύ των οποίων και η Ελλάδα τo 1990 • 1993: ο Tim Berners Lee ανέπτυξε τη γλώσσα HTML, η οποία βασίζεται στο hypertext και σχεδίασε τον παγκόσμιο ιστό World Wide Web (WWW)στο Ερευνητικό Κέντρο Φυσικής CERN στην Ελβετία • Ο Berners Lee χάρισε στο δίκτυο τη σημερινή του μορφή και άνοιξε το δρόμο για τη μαζική παγκόσμια χρήση του • Η δύναμη του Web είναι ότι κάτω από έναν εύχρηστο τρόπο λειτουργίας ενοποιεί πολλά πρωτόκολλα και υπηρεσίες • Το Web είναι ένα σύστημα παράδοσης πληροφοριών το οποίο περιλαμβάνει διάφορους τύπους στοιχείων,όπως κείμενο, φωτογραφίες, πολυμέσα και συνδέσεις που παραπέμπουν σε άλλα κείμενα και γενικότερα πληροφορίες

20. Εισαγωγή στην HTML

21. HTML και CSS • HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο • CSS (Cascading StyleSheets): Περιγράφει τη μορφοποίηση • Πρέπει να γίνεται πάντα σωστός διαχωρισμός από την αρχή

22. HTML CSS

23. Παράδειγμα: Βιβλίο

24. Παράδειγμα 1 Μορφοποίηση αλλάζει, όχι περιεχόμενο • Ίδιο βιβλίο, διαφορετική έκδοση

25. Παράδειγμα 2 Περιεχόμενο αλλάζει, όχι μορφοποίηση • Διαφορετικό βιβλίο, ίδια έκδοση

26. Παράδειγμα 3

27. Παράδειγμα 4

28. HTML • Γράφουμε σε αρχεία .html • Τα επεξεργαζόμαστε με απλό κειμενογράφο (notepad, emacs, vim, κ.ο.κ.) • Περιέχει κώδικα σε μορφή XML • Γίνεται interpret κι όχι compile • Τρέχει μέσα στους browsers • Τρέχει και τοπικά • Η επέκταση πρέπει να είναι .html κι όχι .html.txt

29. Ετικέτες (Tags) • Κάθε tag ξεκινάει με < και τελειώνει με > • Υπάρχουν τριών ειδών tags: Start tags: <html> End tags: </html> Empty-element tags: <new-line /> • Κάθε tag έχει ένα όνομα • Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας • Δενδρική δομή: Ό,τι ανοίγει πρώτο,κλείνει τελευταίο (LIFO)

30. Ετικέτες (Tags)

31. Ετικέτες (Tags)

32. Ετικέτες (Tags) • Ετικέτες που δεν περιέχουν περιεχόμενο κλείνουν τον εαυτό τους • Απουσία περιεχομένου

33. <html>, <head>, <title>, <body> • <html>: Περιέχει ολόκληρη τη σελίδα • <head>: Περιέχει meta-πληροφορίες για τη σελίδα • <title>: Περιέχει τον τίτλο της σελίδας • <body>: Περιέχει το περιεχόμενο της σελίδας • Το <html> πρέπει υποχρεωτικά να περιέχει μόνο<head>και<body>, με αυτή τη σειρά. Το <title>πρέπει να περιέχεται στο <head>

34. Βασική δομής σελίδας - 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</title> </head> <body> Hello World! </body> </html> Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδας

35. Παράγραφοι (paragraphs) • Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά • Πολλά κενά και αλλαγές γραμμών αντικαθίστανται από έναμόνο κενό • <p>: Ορίζει μια παράγραφο (μνημονικό: paragraph) <p>Αυτή είναι η πρώτη μου σελίδα.</p> <p>Είμαι ενθουσιασμένος!</p> Αυτή είναι η πρώτη μου σελίδα. Είμαι ενθουσιασμένος!

36. Αλλαγή γραμμής (break) • <br />: Ορίζει μια αλλαγή γραμμής (μνημονικό: break) • Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση! • Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση μέσω CSS

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

38. Επικεφαλίδες (headlines) • <h1>: Επικεφαλίδα 1ου επιπέδου (headline) • <h2>: Επικεφαλίδα 2ου επιπέδου. • … • <h6>: Επικεφαλίδα 6ου επιπέδου. • Η <h1> χρησιμοποιείται 1 φορά. • Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη. • Δεν υπάρχει h7

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

40. Λίστες (lists) • Αριθμημένες: Σειρά έχει σημασία, χρήση <ol> • Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση <ul> • (μνημονικά: ordered list, unordered list) • <li>: ένα στοιχείο μιας λίστας (μνημονικό: list item) • Το <li> μπορεί να περιέχεται μόνο σε <ol> ή <ul> • Τα <ol> και <ul>μπορούν να περιέχουν μόνο <li>

41. Αριθμημένη Λίστα: Μέρες / Μη Αριθμημένη Λίστα: Ψώνια

42. Εμφώλευση • Η απλότητα και η δύναμη της HTML! • Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους κλπ.

43. Ιδιότητες Ετικετών • Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα • Κάθε ιδιότητα έχει όνομα και τιμή • Όνομα από τιμή χωρίζονται με = • Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά) • Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες

44. Ιδιότητες Ετικετών

45. Σύνδεσμοι (links) • <a> Ορίζει έναν σύνδεσμο (μνημονικό: anchor) • href: ορίζει τον προορισμό του συνδέσμου <a href=“http://htmldog.com”>Μάθε HTML!</a> Μάθε HTML!

46. Είκονες (images) • <img>: Περιγράφει μια εικόνα • src: το αρχείο της εικόνας ως διεύθυνση (υποχρεωτικό) • alt: περιγραφή της εικόνας (υποχρεωτικό) • width: μήκος της εικόνας σε pixels (προαιρετικό) • height: μήκος της εικόνας σε pixels (προαιρετικό) • Η ετικέτα <img>δεν περιλαμβάνει περιέχομενο

47. Είκονες (images)

48. Πίνακες (tables) • Χρησιμοποιούνται μόνο για δεδομένα πίνακα • Για τοποθέτηση στοιχείων σε ορισμένες θέσειςχρησιμοποιούμε CSS και όχι HTML πίνακες! Παράδειγμα: • Πίνακας μαθητών με στοιχεία όνομα, επώνυμο, βαθμολογία • Πίνακας διάσημων επιστημόνων με στοιχεία όνομα, επώνυμο, τομέας, σπουδαιότερη ανακάλυψη.

49. Πίνακας: Διάσημοι Επιστήμονες

50. Γραμμή πίνακα