Τεχνολογίες του παγκόσμιου ιστού
Πελάτης και διακομιστής, HTML, και ο ιστός που γράφουν οι χρήστες.
35 λεπτά
Θα μάθεις να
- Να ξεχωρίζεις το Διαδίκτυο από τον Παγκόσμιο Ιστό.
- Να περιγράφεις το μοντέλο πελάτη-διακομιστή, τον ρόλο του DNS και του HTTP/HTTPS.
- Να αναλύεις μια διεύθυνση URL στα μέρη της.
- Να διαβάζεις και να γράφεις μια απλή σελίδα HTML με επικεφαλίδες, παραγράφους, συνδέσμους και εικόνες.
- Να εξηγείς τι άλλαξε όταν οι χρήστες άρχισαν να γράφουν τον ιστό, και τι σημαίνει αυτό για την αξιοπιστία.
Διαδίκτυο και Παγκόσμιος Ιστός
Οι δύο λέξεις χρησιμοποιούνται σαν να είναι το ίδιο, αλλά δεν είναι.
- Το Διαδίκτυο (Internet) είναι το δίκτυο: εκατομμύρια υπολογιστές και δίκτυα σε όλο τον κόσμο, συνδεδεμένα με καλώδια, οπτικές ίνες και ασύρματες ζεύξεις, που ανταλλάσσουν δεδομένα με κοινούς κανόνες (πρωτόκολλα).
- Ο Παγκόσμιος Ιστός (World Wide Web) είναι μία υπηρεσία που τρέχει πάνω στο Διαδίκτυο: σελίδες συνδεδεμένες μεταξύ τους με συνδέσμους. Τον επινόησε ο Tim Berners-Lee στο CERN, στις αρχές της δεκαετίας του 1990.
Το ηλεκτρονικό ταχυδρομείο, οι βιντεοκλήσεις και τα online παιχνίδια χρησιμοποιούν το Διαδίκτυο χωρίς να είναι μέρος του Ιστού.
Πελάτης και διακομιστής
Ο Ιστός δουλεύει με το μοντέλο πελάτη-διακομιστή (client-server):
| Ρόλος | Ποιος είναι | Τι κάνει |
|---|---|---|
| Πελάτης | ο φυλλομετρητής σου (browser), στο κινητό ή στον υπολογιστή | ζητά σελίδες και τις εμφανίζει |
| Διακομιστής (server) | υπολογιστής που φιλοξενεί έναν ιστότοπο | απαντά στέλνοντας τα αρχεία που ζητήθηκαν |
Η επικοινωνία είναι πάντα αίτημα και απάντηση: ο πελάτης ρωτά, ο διακομιστής απαντά. Ο διακομιστής δεν στέλνει σελίδες σε κανέναν αν δεν του ζητηθούν.
Η διεύθυνση URL
Κάθε σελίδα στον Ιστό έχει μια μοναδική διεύθυνση, το URL (Uniform Resource Locator):
https://www.example.com/lessons/python.html
└─┬─┘ └──────┬─────┘└─────────┬────────┘
πρωτόκολλο όνομα τομέα διαδρομή
| Μέρος | Στο παράδειγμα | Τι λέει |
|---|---|---|
| Πρωτόκολλο | https | με ποιους κανόνες θα γίνει η επικοινωνία |
| Όνομα τομέα (domain) | www.example.com | σε ποιον διακομιστή θα πάει το αίτημα |
| Διαδρομή (path) | /lessons/python.html | ποιο αρχείο ζητείται από τον διακομιστή |
Το .gr στο τέλος του ονόματος τομέα είναι ο τομέας ανωτάτου επιπέδου: εδώ δείχνει την Ελλάδα, ενώ το .com, το .org και το .eu είναι άλλοι.
Τι γίνεται όταν πατάς Enter
- DNS. Οι υπολογιστές στο Διαδίκτυο βρίσκονται με αριθμούς, τις διευθύνσεις IP, όχι με ονόματα. Το DNS (Domain Name System) λειτουργεί σαν τηλεφωνικός κατάλογος: μεταφράζει το
www.example.comστη διεύθυνση IP του διακομιστή. - Αίτημα. Ο φυλλομετρητής στέλνει στον διακομιστή ένα αίτημα HTTP: «δώσε μου το
/lessons/python.html». - Απάντηση. Ο διακομιστής απαντά με έναν κωδικό κατάστασης και, αν όλα πάνε καλά, με το αρχείο.
- Εμφάνιση. Ο φυλλομετρητής διαβάζει το HTML, ζητά με νέα αιτήματα ό,τι άλλο χρειάζεται (εικόνες, CSS, JavaScript), και σχεδιάζει τη σελίδα.
| Κωδικός | Σημασία |
|---|---|
200 | εντάξει, να η σελίδα |
404 | η σελίδα δεν βρέθηκε |
500 | κάτι πήγε στραβά στον διακομιστή |
Το HTTPS είναι το HTTP με κρυπτογράφηση. Όσα ανταλλάσσουν πελάτης και διακομιστής, όπως κωδικοί και στοιχεία φόρμας, δεν διαβάζονται από όποιον βρίσκεται ενδιάμεσα, π.χ. σε ένα δημόσιο Wi-Fi.
HTML: η γλώσσα των σελίδων
Η HTML (HyperText Markup Language) δεν είναι γλώσσα προγραμματισμού: δεν έχει μεταβλητές, επιλογή ή επανάληψη. Είναι γλώσσα σήμανσης: περιγράφει τι είναι κάθε κομμάτι μιας σελίδας (επικεφαλίδα, παράγραφος, σύνδεσμος), με ετικέτες (tags) σε γωνιακές αγκύλες.
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="utf-8">
<title>Η τάξη μας</title>
</head>
<body>
<h1>Η Α΄ Λυκείου</h1>
<p>Φέτος μαθαίνουμε <strong>Python</strong>.</p>
<ul>
<li>Μεταβλητές</li>
<li>Βρόχοι</li>
</ul>
<a href="https://www.python.org">Η σελίδα της Python</a>
<img src="class.jpg" alt="Φωτογραφία της τάξης">
</body>
</html>
Οι περισσότερες ετικέτες έρχονται σε ζεύγη: η <p> ανοίγει μια παράγραφο και η </p> την κλείνει. Ανοιχτή ετικέτα, περιεχόμενο και κλειστή ετικέτα μαζί λέγονται στοιχείο (element). Μερικά στοιχεία, όπως το <img>, δεν έχουν περιεχόμενο και δεν κλείνουν.
| Ετικέτα | Τι δηλώνει |
|---|---|
<head> | πληροφορίες για τη σελίδα, όπως ο τίτλος στην καρτέλα· δεν φαίνονται στο σώμα |
<body> | ό,τι βλέπει ο αναγνώστης |
<h1> ως <h6> | επικεφαλίδες, από την πιο σημαντική στη λιγότερο |
<p> | παράγραφος |
<ul>, <li> | λίστα με κουκκίδες, και κάθε στοιχείο της |
<a href="…"> | σύνδεσμος (υπερσύνδεσμος) προς άλλη διεύθυνση |
<img src="…" alt="…"> | εικόνα, με εναλλακτικό κείμενο |
Τα href, src και alt είναι ιδιότητες (attributes): δίνουν επιπλέον πληροφορίες σε μια ετικέτα. Το alt περιγράφει την εικόνα με λέξεις, για όποιον δεν μπορεί να τη δει: έναν άνθρωπο που χρησιμοποιεί αναγνώστη οθόνης, ή κάποιον με αργή σύνδεση που δεν τη φόρτωσε.
Τρεις γλώσσες, τρεις δουλειές
Μια σύγχρονη σελίδα χτίζεται με τρία είδη αρχείων:
| Γλώσσα | Απαντά στο | Παράδειγμα |
|---|---|---|
| HTML | τι είναι το περιεχόμενο; | «αυτό είναι επικεφαλίδα» |
| CSS | πώς φαίνεται; | «οι επικεφαλίδες είναι μπλε και μεγάλες» |
| JavaScript | πώς συμπεριφέρεται; | «όταν πατηθεί το κουμπί, δείξε το μενού» |
Μια σελίδα που είναι ίδια για όλους, ένα αρχείο HTML που απλώς στέλνεται, λέγεται στατική. Μια σελίδα που φτιάχνεται τη στιγμή του αιτήματος, όπως το χρονολόγιο ενός κοινωνικού δικτύου που είναι διαφορετικό για κάθε χρήστη, λέγεται δυναμική.
Ο ιστός που γράφουν οι χρήστες
Στα πρώτα χρόνια, λίγοι έγραφαν σελίδες και πολλοί τις διάβαζαν. Από τα μέσα της δεκαετίας του 2000, με αυτό που ονομάστηκε Web 2.0, ο Ιστός άρχισε να γράφεται από τους ίδιους τους χρήστες:
- wiki, όπως η Βικιπαίδεια, όπου οποιοσδήποτε διορθώνει ένα λήμμα
- ιστολόγια (blogs) και κοινωνικά δίκτυα
- πλατφόρμες βίντεο και κριτικές χρηστών για προϊόντα και μαγαζιά
Αυτό έδωσε φωνή σε εκατομμύρια ανθρώπους. Έφερε όμως και δύο ερωτήματα που πριν δεν υπήρχαν με την ίδια ένταση.
Ποιος το έγραψε, και μπορώ να το εμπιστευτώ; Μια σελίδα που φαίνεται επαγγελματική μπορεί να την έγραψε οποιοσδήποτε. Πριν πιστέψεις κάτι, ψάχνεις: ποιος είναι ο συντάκτης, πότε γράφτηκε, αν αναφέρει πηγές, και αν το ίδιο το λένε και άλλες, ανεξάρτητες πηγές.
Τι μένει από όσα γράφω εγώ; Ό,τι ανεβάζεις αντιγράφεται, αποθηκεύεται και ψάχνεται, συχνά για χρόνια. Αυτό είναι το ψηφιακό σου αποτύπωμα. Και ό,τι ανεβάζεις για άλλους, όπως μια φωτογραφία φίλων, είναι και δικό τους αποτύπωμα.
Λυμένα παραδείγματα
Παράδειγμα 1
Ανάλυσε τη διεύθυνση https://el.wikipedia.org/wiki/Python: ποιο είναι το πρωτόκολλο, το όνομα τομέα και η διαδρομή; Είναι η σύνδεση κρυπτογραφημένη;
Δοκίμασέ το πρώτα. Μετά δες τη λύση.
Παράδειγμα 2
Ένας μαθητής έγραψε: <h1>Η εκδρομή μας<h1>, μετά <p>Πήγαμε στους <strong>Δελφούς</p>, και τέλος <img src='delphi.jpg'>. Βρες τα τρία λάθη.
Δοκίμασέ το πρώτα. Μετά δες τη λύση.
Παράδειγμα 3
Γράφεις σωστά μια διεύθυνση και ο φυλλομετρητής δείχνει 404. Σε ποιο βήμα της διαδρομής αιτήματος και απάντησης βρίσκεται το πρόβλημα;
Δοκίμασέ το πρώτα. Μετά δες τη λύση.
Ασκήσεις
Πρώτα ερωτήσεις με επιλογές: διαλέγεις, πατάς «Έλεγξε» και μαθαίνεις αμέσως αν το βρήκες και γιατί. Στο τέλος, λίγες ασκήσεις χωρίς επιλογές — εκεί κρύβεται μόνο η απάντηση.
Τα κατάφερες;
- Να ξεχωρίζεις το Διαδίκτυο από τον Παγκόσμιο Ιστό.
- Να περιγράφεις το μοντέλο πελάτη-διακομιστή, τον ρόλο του DNS και του HTTP/HTTPS.
- Να αναλύεις μια διεύθυνση URL στα μέρη της.
- Να διαβάζεις και να γράφεις μια απλή σελίδα HTML με επικεφαλίδες, παραγράφους, συνδέσμους και εικόνες.
- Να εξηγείς τι άλλαξε όταν οι χρήστες άρχισαν να γράφουν τον ιστό, και τι σημαίνει αυτό για την αξιοπιστία.
Λύσε τις ασκήσεις πιο πάνω και θα δεις εδώ πού στέκεσαι.