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

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

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: <html> End tags: </html> Empty-element tags: <new-line />

Κάθε tag έχει ένα όνομα

Ανάμεσα στο άνοιγμα και στο κλείσιμο βρίσκεται το περιεχόμενο της ετικέτας

Δενδρική δομή: Ό,τι ανοίγει πρώτο, κλείνει τελευταίο (LIFO)

Ετικέτες (Tags)

Ετικέτες (Tags)

Ετικέτες (Tags)

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

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

<html>, <head>, <title>, <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</title> </head> <body> Hello World! </body> </html>

Δηλώνει την έκδοση της HTML Κάνει τον browser να συμπεριφέρεται σωστά Το κάνουμε copy/paste στην αρχή της σελίδας

Παράγραφοι (paragraphs)

Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά Πολλά κενά και αλλαγές γραμμών

αντικαθίστανται από ένα μόνο κενό <p>: Ορίζει μια παράγραφο (μνημονικό:

paragraph)

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

<p>Είμαι ενθουσιασμένος!</p>

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

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

Αλλαγή γραμμής (break)

<br />: Ορίζει μια αλλαγή γραμμής

(μνημονικό: break)

Προσοχή: Δεν πρέπει να χρησιμοποιείται για μορφοποίηση!

Αυξομειώνουμε την κάθετη απόσταση με μορφοποίηση

μέσω CSS

Έμφαση

<em>: Δίνει έμφαση σε ένα τμήμα κειμένου (emphasis)

<strong>: Δίνει ιδιαίτερη έμφαση σε ένα τμήμα κειμένου (strong emphasis)

Συνηθίζεται το <em> να μορφοποιείται με πλάγια και το <strong> με έντονα γράμματα.

Δεν χρησιμοποιούμε <strong> και <em> για μορφοποίηση!

Ορίζουμε τι θα έχει έντονη ή πλάγια γραφή με CSS. Οι ετικέτες αυτές καθορίζουν μόνο την έμφαση στο περιεχόμενο.

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

<h1>: Επικεφαλίδα 1ου επιπέδου (headline) <h2>: Επικεφαλίδα 2ου επιπέδου. … <h6>: Επικεφαλίδα 6ου επιπέδου.

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

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

Δεν υπάρχει h7

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

Λίστες (lists)

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

χρήση <ul> (μνημονικά: ordered list, unordered list)

<li>: ένα στοιχείο μιας λίστας (μνημονικό: list item)

Το <li> μπορεί να περιέχεται μόνο σε <ol> ή <ul>

Τα <ol> και <ul> μπορούν να περιέχουν μόνο <li>

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

Εμφώλευση

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

παραγράφους κλπ.

<h1>Λόγοι που έρχομαι στο σεμινάριο</h1> <ol> <li>Για να εντυπωσιάσω: <ul> <li>Τη γάτα μου</li> <li>Το σκύλο μου</li> <li>Την Αννούλα</li> </ul> <li>Για να μάθω</li> <li>Για να γίνω διάσημος</li> </ol>

Λόγοι που έρχομαι στο σεμινάριο 1. Για να εντυπωσιάσω: • Τη γάτα μου • Το σκύλο μου • Την Αννούλα 2. Για να μάθω 3. Για να γίνω διάσημος

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

Εμφανίζονται στο άνοιγμα της ετικέτας μετά το όνομα

Κάθε ιδιότητα έχει όνομα και τιμή

Όνομα από τιμή χωρίζονται με =

Η τιμή περιλαμβάνεται σε “εισαγωγικα” (μονά ή διπλά)

Οι ιδιότητες χωρίζονται με κενό από το όνομα της ετικέτας και από τις άλλες ετικέτες

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

Σύνδεσμοι (links)

<a> Ορίζει έναν σύνδεσμο (μνημονικό: anchor) href: ορίζει τον προορισμό του συνδέσμου

<a href=“http://htmldog.com”>Μάθε HTML!</a>

Μάθε HTML!

Είκονες (images)

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

Η ετικέτα <img> δεν περιλαμβάνει περιέχομενο

Είκονες (images)

Πίνακες (tables)

Χρησιμοποιούνται μόνο για δεδομένα πίνακα Για τοποθέτηση στοιχείων σε ορισμένες θέσεις

χρησιμοποιούμε CSS και όχι HTML πίνακες!

Παράδειγμα: Πίνακας μαθητών με στοιχεία όνομα, επώνυμο,

βαθμολογία Πίνακας διάσημων επιστημόνων με στοιχεία όνομα,

επώνυμο, τομέας, σπουδαιότερη ανακάλυψη.

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

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

Κελί πίνακα

Πίνακες (tables)

<table>: Ορίζει έναν πίνακα <tr>: Ορίζει μια γραμμή πίνακα <td>: Ορίζει ένα κελί πίνακα

Προσοχή: <table> περιέχει μόνο <tr> <tr> περιέχει μόνο <td> <td> περιέχεται μόνο σε <tr> <tr> περιέχεται μόνο σε <table>

Πίνακες (tables)

<table>

<tr>

<td>Alan</td><td>Turing</td>

<td>Επιστήμη Υπολογισμού</td><td>Turing Machines</td>

</tr>

<tr>

<td>Ludwig</td><td>Wittgenstein</td>

<td>Φιλοσοφία</td><td>Tractatus</td>

</tr>

<tr>

<td>Αρχιμίδης</td><td></td>

<td>Μηχανικός</td><td>Μοχλός</td>

</tr>

<tr>

<td>Leonhard</td><td>Euler</td>

<td>Μαθηματικά</td><td>e^ιπ + 1 = 0</td>

</tr>

</table>

Βιβλιογραφία - Αναζητήσεις

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)

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